In iOS 8.0, Apple introduced a new bug in Safari on iPhone, which I think is very serious when using multiple <select>
elements. It's commonly used for example to select day of birth. To reproduce:
Create a page with two <select>
with multiple <option>
in each
Open in Safari on iOS 8 on iPhone (The bug still exists in 8.0.2)
Tap the first <select>
Choose the third option i.e. March
Notice that it doesn't update the <select>
to what you chose (it does in iOS 7)
Tap the second <select>
element
Notice the following:
<select>
doesn't update<select>
shows 3 (which is the position of the first <select>
)You can repeat this by alternating between tapping the first and second <select>
, and notice that it changes in the same pattern. This may appear randomly unless you know the pattern). It looks even more confusing if you also have a year-picker.
To try in your mobile device, try this jsfiddle: http://jsfiddle.net/m7baw590/6/embedded/result/
Also, the onchange="alert(this.value)"
reports an incorrect value (the same that is selected on the second <select>
element. You can see this here: http://jsfiddle.net/m7baw590/7/embedded/result/
These bugs does not occur if you click "Done" between each selection, or use the arrows to switch.
Is there any workaround for this?
I discovered another bug with select fields in iOS8 (Only on iPhone, iPad seems fine for example).
How to reproduce: