I have seen this bug a couple of times now while testing different mobile projects on older Android devices: something weird causes select drop downs (and sometimes other form elements) to completely ignore click events. Tap away at the screen as much as you want – the browser just won’t listen.
Google searches confirmed that I was not the only one that suffered from this bug. The array of solutions suggested on StackOverflow and other forums howver at first seemed to be of no help to me.
I have learnt from previous testing on old Androids that form elements can break and stop functioning for what seem to be almost any reason, but when I finally found the cause in this case, I could hardly believe it, it just seemed to bizarre. Thanks to wilco:
A fixed element that contains an absolute positioned element, which itself contains an absolute positioned element, will cause select menus on the page to stop responding altogether.
In my case it was an absolutely positioned element containing another empty absolutely positioned element that caused the bug. I added a non-breaking space (& nbsp;) to the inner element, and the problem was solved, for this time.
Old mobiles and their browsers are the new IE6. Just as before, we have to get our hands dirty and solve these bugs in order to make our content accessible and our users happy. And unlike before, the number of users on these kind of browser might not be shrinking, but growing as more and more of the world gets connected to the web!