BUG: Input label with browser autofill

[antenucci96]

Comportamento atteso

Quando avviene l'auto completamento da parte del browser la label degli input deve essere attiva #236

Comportamento attuale

Il bug è riscontrato in chrome con lo stesso comportamento della issue #236

Possibili soluzioni

Contesto

[AntoninoBonanno]

Ciao @antenucci96 non riesco a riprodurre il problema (mi sembra funzionare sia su chrome che su firefox)

Mi puoi dare maggiori informazioni?

• versione del design-angular-kit usata
• versione di angular
• un esempio riproducibile

[antenucci96]

Preciso che il bug si presenta solo quando c'è il tag it-input-password.
In una schermata di autenticazione ad esempio, dopo aver salvato le credenziali in chrome

[AntoninoBonanno]

@antenucci96 sono riuscito a riprodurre il problema.
Sembra essere un bug di chrome vedi issue nel repository di angular

Facendo alcune prove, il browser non effettua il trigger dell'evento change nell'input finche non viene effettuato un click sulla pagina, infatti fino a quel momento il valore dell'input sembra essere null.

Ciò su firefox non avviene.

Una possibile soluzione sarebbe quella di inserire la regola scss

.form-group {
  input:-webkit-autofill ~ label:not(.active) {
    transform: translateY(-75%);
  }
}

e trasformare l'html da

<label.... >
<input.... >

a

<input.... >
<label.... >

@astagi questo problema si verifica anche sulla libreria bootstrap-italia?
in tal caso non sarebbe meglio applicare questo fix direttamente sulla libreria principale piuttosto che sul design-angular-kit?

[astagi]

@antenucci96 @AntoninoBonanno provo sulla libreria Bootstrap Italia, in alternativa possiamo già qua modificare il componente e aggiungere la regola css. Unico dubbio se invertire input e label può dare problemi di accessibilità.

[AntoninoBonanno]

@astagi ho trovato una soluzione senza dover spostare la posizione della label

.form-group {
  label:not(.active):has(+ input:-webkit-autofill) {
     transform: translateY(-75%);
  }
}

farò un PR in giornata