iOS 8 multiple <select> serious bug on iPhone?

Question

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:

1. Create a page with two <select> with multiple <option> in each

2. Open in Safari on iOS 8 on iPhone (The bug still exists in 8.0.2)

3. Tap the first <select>

4. Choose the third option i.e. March

5. Notice that it doesn't update the <select> to what you chose (it does in iOS 7)

6. Tap the second <select> element

7. Notice the following:

   • The first <select> doesn't update
   • The second <select> shows 3 (which is the position of the first <select>)
   • The picker below shows 1

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?

Answer 1

I solved the problem this way:

<select>
    <option></option>
    <option></option>
    <option></option>
    (...)
    <optgroup disabled></optgroup>
</select>

Just added an empty <optgroup> to the <select>.

Answer 2

I discovered another bug with select fields in iOS8 (Only on iPhone, iPad seems fine for example).

http://jsbin.com/kuhogopafe/1

How to reproduce:

• Select 3 options
• Unselect one option again
• Result: instead of 2 selected options, only the last unselected option is reported as selected now