web-dev-qa-db-fra.com

iOS 8 multiple <select> bug sérieux sur iPhone?

Dans iOS 8.0, Apple a introduit un nouveau bogue dans Safari sur iPhone, ce qui, à mon avis, est très grave lorsque vous utilisez plusieurs éléments <select>. Il est couramment utilisé par exemple pour sélectionner le jour de naissance. Reproduire:

  1. Créez une page avec deux <select> avec plusieurs <option> dans chaque

  2. Ouvrir dans Safari sur iOS 8 sur iPhone (le bogue existe toujours dans la version 8.0.2)

  3. Appuyez sur le premier <select>

  4. Choisissez la troisième option c'est-à-dire mars

  5. Notez qu'il ne met pas à jour le <select> avec ce que vous avez choisi (cela se produit dans iOS 7).

  6. Appuyez sur le deuxième élément <select>

  7. Notez ce qui suit:

    • Le premier <select> ne se met pas à jour
    • Le deuxième <select> montre 3 (qui est la position du premier <select>)
    • Le sélecteur ci-dessous montre 1

Vous pouvez répéter cette opération en alternant entre le premier et le deuxième <select>, et vous remarquerez qu'il change dans le même motif. Cela peut apparaître aléatoirement sauf si vous connaissez le motif). Cela semble encore plus déroutant si vous avez également un choix d'année.

Pour essayer sur votre appareil mobile, essayez ceci jsfiddle: http://jsfiddle.net/m7baw590/6/embedded/result/

De plus, onchange="alert(this.value)" signale une valeur incorrecte (identique à celle sélectionnée sur le deuxième élément <select>. Vous pouvez le voir ici: http://jsfiddle.net/m7baw590/7/embedded/result/

Ces bogues ne se produisent pas si vous cliquez sur "Terminé" entre chaque sélection ou utilisez les flèches pour changer.

Y at-il une solution de contournement pour cela?

iosiphonesafariios8html-select
27
Niclas

J'ai résolu le problème de cette façon:

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

Vient d’ajouter un <optgroup> vide au <select>.

7
rdshck

J'ai découvert un autre bogue avec certains champs dans iOS8 (uniquement sur iPhone, iPad semble bien par exemple).

http://jsbin.com/kuhogopafe/1

Comment reproduire:

  • Sélectionnez 3 options 
  • Désélectionner à nouveau une option 
  • Résultat: au lieu de 2 Options sélectionnées, seule la dernière option non sélectionnée est signalée comme Sélectionnée maintenant.
10
Alex

La seule solution que j'ai trouvée pour l'iphone Safari est de désactiver tous les autres boites de sélection onfocus et de réactiver tous les onblur. Cela forcera l'utilisateur à appuyer sur Terminé.

0
Andras