update - ¿iOS 8 error grave<select> en iPhone?

iphone 7 itunes restore error

Question

En iOS 8.0, Apple introdujo un nuevo error en Safari para iPhone, que creo que es muy serio cuando se usan múltiples elementos <select> . Se usa comúnmente, por ejemplo, para seleccionar el día de nacimiento. Reproducir:

1. Cree una página con dos <select> con múltiples <option> en cada una

2. Abrir en Safari en iOS 8 en iPhone (el error aún existe en 8.0.2)

3. Toque en el primer <select>

4. Elige la tercera opción, es decir marzo

5. Observe que no actualiza la <select> a lo que eligió (lo hace en iOS 7)

6. Toque el segundo elemento <select>

7. Note lo siguiente:

   • El primer <select> no se actualiza
   • El segundo <select> muestra 3 (que es la posición del primer <select> )
   • El selector de abajo muestra 1

Puede repetir esto alternando entre tocar primero y segundo <select> , y notar que cambia en el mismo patrón. Esto puede aparecer al azar a menos que sepa el patrón). Parece aún más confuso si también tiene un selector de años.

Para probar en su dispositivo móvil, pruebe este jsfiddle: http://jsfiddle.net/m7baw590/6/embedded/result/

Además, onchange="alert(this.value)" informa un valor incorrecto (el mismo que se selecciona en el segundo elemento <select> . Puede ver esto aquí: http://jsfiddle.net/m7baw590/7/embedded/result/

Estos errores no se producen si hace clic en "Listo" entre cada selección, o usa las flechas para cambiar.

¿Hay alguna solución para esto?

Answer 1

Descubrí otro error con campos seleccionados en iOS8 (solo en iPhone, iPad parece estar bien, por ejemplo).

http://jsbin.com/kuhogopafe/1

Cómo reproducir:

• Seleccione 3 opciones
• Deselecciona una opción de nuevo
• Resultado: en lugar de 2 opciones seleccionadas, solo la última opción no seleccionada se informa como seleccionada ahora

Answer 2

La única solución que encontré para el iPhone Safari es desactivar todos los demás cuadros de selección en el enfoque y volver a habilitar todo el Blur. Esto obligará al usuario a presionar Hecho.

Answer 3

Resolví el problema de esta manera:

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

Acaba de agregar un <optgroup> vacío al <select> .