CODEWITHSUNDEEP
htmlioscsssafarimobile-safari
Jeroen
Jeroen

Reputation: 63709

iOS Safari selecting multiple options visually for single select

I'm using this "empty optgroup" workaround to get iOS to show option elements with long text in a readable manner. I'm using the following code to test this solution:

<p>Choose something:</p>
<select>
    <option>Option A</option>
    <option>Some other option which is much longer than the first two options that has a distinguising feature at the end: B!</option>
    <option>Some other option which is much longer than the first two options that has a distinguising feature at the end: C!</option>
    <option>Option D</option>
    <option>Option E</option>
    <option>Option F</option>
    <option>Option G</option>
    <optgroup label=""></optgroup>
</select>

optgroup { display: none; }

It does make iOS Safari display the long options wrapped so they're distinguishable again, but it opens up another problem where multiple items seem selected even though it is a single select dropdown.

To reproduce:

  1. Open this jsFiddle's fullscreen result on a fully updated iPhone 4S;
  2. Tap the select to open it.

Notice that "Option A" is now selected.

  1. Scroll down in the native dropdown control until "Option A" is no longer visible.
  2. Tap to select "Option E".
  3. Scroll a bit back.

End result is that two options seem to be selected:

Option "A" and "E" both selected

The expected result obviously is that only "E" is selected.

How can I solve this issue?

Upvotes: 3

Views: 3394

Answers (1)

pcdev
pcdev

Reputation: 3052

I found this issue without the optgroup element, when I was programmatically re-populating and selecting a default item in a combo box, in response to another field changing. I found that I simply had to clear out the old selection first:

$("#time")[0].selectedIndex = -1 // this fixed it for me
$("#time option").each(function () {
        if ($(this).val() == oldtime) {
            $(this).attr("selected", "selected");
            return;
        }
});

Only Safari had this problem, it's clearly a bug that a single-select list can have two items visibly selected.

Upvotes: 2

Related Questions