Angular / Safari: champs password désactivé dans une modal

Bonjour,

Je travaille comme intégrateur sous angular et j'ai un problème de taille que je ne parviens pas à résoudre en HTML / CSS. Donc le problème doit venir du JS.

Dnas une web-app, je créé un champs password qui onclick devient un champ text. Le champs password comme le champ text est actif, remplissable, tout se passe bien.
Je place le même champs dnas un modal et là UNQIUEMENT SOUS SAFARI) le champs mot de passe n'est plus actif. Je ne parviens pas à résoudre ce conflit par le HTML / CSS donc à mon avis il y a un pb js.

Avez vous déjà rencontré cela ?

Bonjour,

1) que dit la console ?

2) il faudrait essayer de reproduire le bug avec un exemple réduit au minimum avec du js (sans angular).

Amicalement,

Merci de ta réponse : cela me fait penser que :

1/ Lorsque je transforme le champs PASSWORD en champs TEXT (type=password > type=text) alors le champs devient fonctionnel.

2/ Sur un autre site, les mêmes champs sont sur une page sans modal, et cela fonctionne. Il y a donc un lien entre javascript (java) et password. Sans Angular, cela fonctionne bien sûr !

Bonjour,

Et rien dans la console ?

Amicalement
Modifié par parsimonhi (14 Nov 2020 - 12:25)

Non rien !

Si je vire tout le truc qui fait que c'est une modal, alors ça fonctionne. Il y a un lien avec ça.
C'est une modal qui passe en display none depuis le clic sur un bouton (pas le même composant > rooter ...).
Uns fois affichée, tout focntionne, sauf le password. Si je clique sur mon oeil qui transforme en champs text, alors tout fonctionne; C'est ça qui me pose question !
Modifié par krisken (14 Nov 2020 - 13:38)

Bonjour,

Ça veut dire quoi "tout fonctionne, sauf le password" ? Le champ où l'on doit mettre le password est grisé ? On ne peut rien y mettre ?

Amicalement,

En fait on ne peut rien y écrire : on tape au clavier rien ne s'écrit.
Je change le type par du type="text" et PAF c bon tout fonctionne. C'est uniquement ce champs type password qui déconne !

Si tu as safari tu peux regarder ce que ça fait ici > https://www.oopetrdv.com/fr/
Modifié par krisken (14 Nov 2020 - 15:25)

Bonjour,

1) Sur safari, si on désactive css, les champs semblent fonctionner. Javascript seul ne semble donc pas le coupable.

2) Chez moi le champ "email" ne fonctionne pas mieux que le champ "password". Et même si je clique sur l'oeil, ça ne marche pas.

Je soupçonne un problème avec la règle css user-select qui est à none sur pas mal d'éléments. Tu devrais tenter dans un premier temps de mettre all partout. Note qu'il faut utiliser -webkit-user-select pour safari.

Je dis ça sans trop de conviction parce que quand on vérifie le style calculé avec l'inspecteur, tes inputs ont bien un -webkit-user-select:text et non pas none.

Amicalement,

Et là dessus c'est comment ?
https://rdvweb.oopet.tech/

Bonjour,

Sur mon safari, pareil que pour ton lien précédent. Ne marche pas, ni pour email, ni pour password.

Amicalement,

Alors je crois que j'ai trouvé:

Il y avait une CSS > dirigé par sur un javascript qui plaçait l'éléments <label> devant (absolute + z-index) le champs password, et qui du coup empêchait de pouvoir :focus sur le champs type="password".