I have recently started working with the Ionic framework, and have encountered a very strange error regarding the ion-select element. Upon being clicked by the user, it generates no Ionic alert. I originally thought it was an error in my own code, however found nothing, and upon accidentally exiting Mozilla Firefox's Responsive Design Mode, it worked perfectly. I then tried this sample code from the Ionic documentation on how to use ion-select. This code uses the Ionic components without any framework. In Responsive Design Mode, it fails to generate any alerts when the selects are clicked, and no errors are produced. I'm using Firefox 71.0 (64-bit) on Ubuntu 18.04.
The selects function perfectly without Responsive Design Mode, and while shrinking the browser window. In Responsive Design Mode, they do function properly when simulating large devices, such as a TV, but not with anything else. I thought this might be an error in the user agent, so here is a user agent for when it doesn't work (TVs and Laptops have no user agent, they are just different sizes):
Mozilla/5.0 (Linux; Android 7.0; SM-G892A Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/67.0.3396.87 Mobile Safari/537.36UPDATE: I did some further testing and the other thing that fixes the problem is removing the ion-select from its ion-item container. I have no idea why this would fix the problem, which changes my original idea that this could be to do with the user agent. Also, I tried manually changing my browser's user agent to the above, and the selects work perfectly. This appears to be an issue with Responsive Design Mode?
Any help would be appreciated!
Okay. I figured it out after a lot more testing. This appears to be some strange thing in the touch simulation of Responsive Design Mode. I accidentally disabled it (really should've tried that sooner), and the problem was gone. I have no idea what causes this odd behaviour and an explanation would still be appreciated, but the fix is quite easy.