iOS 8 multiple <select> serious bug on iPhone?

Niclas picture Niclas · Sep 30, 2014 · Viewed 7.4k times · Source

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

Alex picture Alex · Oct 30, 2014

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