CODEWITHSUNDEEP
iosiphonesafariios8html-select
Niclas
Niclas

Reputation: 1402

iOS 8 multiple <select> serious bug on iPhone?

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?

Upvotes: 31

Views: 8043

Answers (3)

rdshck
rdshck

Reputation: 592

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>.

Upvotes: 10

Andras
Andras

Reputation: 1

The only solution I found for iphone Safari is to disable all other select boxes onfocus and re-enable all onblur. This will force the user to push Done.

Upvotes: 0

Alex
Alex

Reputation: 12433

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

Upvotes: 10

Related Questions