HTML SELECT on iOS Chrome doesn't show "Done" option

Question

We have a problem with UIs rendering in Chrome on iOS, specifically the HTML SELECT Drop Down element.

Example:

Using Safari, when you tap on the SELECT, a spinner opens at the bottom of the screen - and you can tap Done to select your choice and return to the form.

But when you load the exact same page in Chrome on iOS, the "Done" doesn't appear. The user has to select their choice then tap somewhere else on the UI to return to the form. Very unintuitive and it feels to the user as though the SELECT hasn't worked.

Does anyone have a solution for this?

(I'd post pictures to illustrated but this is my first question and I don't have enough "reputation" to do this :-( )

Answer 1

I experienced the same thing and it seems to do with having a select without a sorounding form-tag and submit button. Without the select displays a "X" to close the select and with form/submit it displays the text "Done".

Answer 2

The comment from howlee is certainly true for the link provided but if you spend time adding another select element it once again shows the X instead of a done button.

So I guess for 1 element it shows Done, for more than 1 it flicks from Done to X.

Maybe it is the functionality that they wish to show and we should leave it to be consistent?

:-S

Answer 3

It appears to be a Chrome for iOS "feature". My guess is that it's for Material Design reasons that they want to cover over the regular iOS styling.

The X appears to function the same way as the Done button and anyone who uses Chrome for iOS should be familiar that is behaves this way.

I'm sure there are ways around it but they would be rather hacky.

I get the feeling the fact that it doesn't show up on w3schools site has something to do with all the iframes on there.