Form input - bug placeholder nella label degli input

[riccardolecca]

Versione di Bootstrap Italia

v2.7.8

Comportamento atteso

Quando il focus è su un input la label si sposta verso l'alto per l'immissione dei caratteri.

Comportamento attuale

Dalla versione 2.7.8 in poi, la label non si sposta verso l'alto e causa la sovrapposizione della label al campo input quando vengono immessi caratteri.

[astagi]

Ciao @riccardolecca non riesco a riprodurre il bug, in documentazione l'esempio con label funziona perfettamente, hai provato a vedere se ci sono errori di markup?

[riccardolecca]

Ciao @astagi , non vedo errori di markup (allego un esempio usato per fare una prova con la versione 2.8.1). Adesso ho aggiornato dalla versione 2.7.8 alla 2.8.1.
Mentre se faccio nuovamente un downgrade alla versione 2.7.8 funziona di nuovo perfettamente.
Qualche classe che va in conflitto forse?

Indagherò meglio sulla problematica e ti informerò nel caso di novità.

Grazie!

[Virtute90]

Il file js principale viene inserito correttamente nella pagina? I files css e js come li carichi?

[astagi]

Sembra quasi che il JS non venga inserito alla fine del body ma all'inizio come ipotizza @Virtute90 . Puoi fare una verifica @riccardolecca ?

[riccardolecca]

Ciao @Virtute90 e @astagi, sto utilizzando bs-italia su un progetto Angular utilizzandolo come dipendenza npm. Ti confermo che il js e il css vengono caricati all'avvio del progetto, infatti non riscontro problemi con altri componenti come ad esempio i Tab (vi allego screenshot degli Origin della pagina).

Vi specifico inoltre che utilizzo bs-italia dalle versioni precedenti alla 2.x.x e non ricordo di aver mai riscontrato problemi di questo tipo. Ho inoltre effettuato le verifiche aggiornando dalla versione 2.7.8 all'ultima (2.8.2). Se avete bisogno di altre informazioni o di altre verifiche resto a disposizione.

Grazie!

[Virtute90]

Ciao @Virtute90 e @astagi, sto utilizzando bs-italia su un progetto Angular utilizzandolo come dipendenza npm. Ti confermo che il js e il css vengono caricati all'avvio del progetto, infatti non riscontro problemi con altri componenti come ad esempio i Tab (vi allego screenshot degli Origin della pagina).

Vi specifico inoltre che utilizzo bs-italia dalle versioni precedenti alla 2.x.x e non ricordo di aver mai riscontrato problemi di questo tipo. Ho inoltre effettuato le verifiche aggiornando dalla versione 2.7.8 all'ultima (2.8.2). Se avete bisogno di altre informazioni o di altre verifiche resto a disposizione.

Grazie!

Visto che si tratta di un progetto Angular, ti consiglio di controllare la documentazione https://italia.github.io/design-angular-kit e l'esempio per la form https://italia.github.io/design-angular-kit/design-angular-kit#/componenti/form-input.

Inoltre esiste un repo per angular kit https://github.com/italia/design-angular-kit, magari qualcuno ti sa aiutare maggiormente.

[PiemP]

credo dipenda dal PR #955 perchè ho rimosso gli eventi che abilitavano le label attive nel caso in cui premevi il pulsante del mouse o premevi un tasto sulla tastiera. Nel caricamento della parte della pagina in modalità asincrona bisognerebbe re-inizializzare i campi input e le relative label.

Però credo che la versione di bootstrap italia citata nella issue sia errata perché questa modifica fa parte della 2.7.9.

[cscc81]

Ho anche io lo stesso problema di @riccardolecca e sembra verificarsi sul primo input che ha label associata <label for="inputId"> soltanto quando il componente viene caricato con <a class="btn" routerLink="/pagina-componente">Pagina Componente</a>.
Se invece si effettua il refresh sulla pagina il problema sparisce.

Uso Angular 18 e Bootstrap Italia 2.11.0

[astagi]

Grazie @cscc81 provo a fare alcune prove e guardarci. Puoi fornire un codice (anche con Angular ben venga) che riproduce il problema? Grazie infinite!

[cscc81]

Componente che presenta il problema

<div class="container text-center">
     <div class="row justify-content-center">
        <div class="form-group col-4 mb-1">
             <form [formGroup]="userform" (ngSubmit)="onSubmit()">
                 <div class="mb-3">
                     <label for="email">Inserisci l'email</label>
                     <input type="email" class="form-control" id="email" formControlName="email">
                 </div>
                 <div class="mb-3">
                     <button class="btn btn-primary" type="submit" [disabled]="userform.invalid">Procedi</button>
                 </div>
             </form>
         </div>
     </div>
     <div class="row">
         <div>
             <a class="btn" role="button" routerLink="">Torna alla pagina di login</a>
         </div>
     </div>
 </div>

Componente con il link al componente precedente da specificare come pagina di atterraggio, url di root o di primo caricamento:

<div class="row mt-4">
  <a class="btn" routerLink="password-dimenticata">Password Dimenticata</a>
</div>

app-component.html:

<main class="main">
  <div class="content">
    <div class="mx-auto text-center">
      <h1>Titolo</h1>
    </div>
    <div>
      <router-outlet />
    </div>
  </div>
</main>

Configurazione di app-routing-module.ts

const routes: Routes = [
  { path: "password-dimenticata", component: EmailComponent},
  { path: "", component: HomeComponent },
];

[cscc81]

Bootstrap Italia installato con:

ng add design-angular-kit