Issue with browser input auto completion

Topic: Issue with browser input auto completion

estalis free asked 2 years ago

Expected behavior Basically when the window is not focused yet, the input label appears in top of the content itself, strange. using chrome.

Actual behavior https://i.gyazo.com/cb12f2c6598ba45ea14bf60dd838e019.mp4

Resources (screenshots, code snippets etc.)

<form [formGroup]="loginForm" (ngSubmit)="submit()">

  <!-- Champs nom d'utilisateur -->
  <mdb-form-control class="mb-4">
    <input mdbValidate mdbInput type="text" class="form-control" formControlName="username" name="username"
      autocomplete="username">
    <label mdbLabel class="form-label">Nom d'utilisateur</label>
    <mdb-error *ngIf="isUsernameInvalid">Champs requis, entre 5 et 30 caractères</mdb-error>
  </mdb-form-control>

  <!-- Champs mot de passe -->
  <mdb-form-control class="mb-4">
    <input mdbValidate mdbInput type="password" class="form-control" formControlName="password" name="password"
      autocomplete="current-password">
    <label mdbLabel class="form-label">Mot de passe</label>
    <mdb-error *ngIf="isPasswordInvalid">Champs requis, entre 3 et 30 caractères</mdb-error>
  </mdb-form-control>

  <!-- Bouton de validation du formulaire -->
  <button class="btn btn-primary" [disabled]="!loginForm.valid || loading" type="submit">
    <div class="d-flex justify-content-center">

      <ng-container *ngIf="loading; else notLoading;">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="ms-2">PATIENTEZ</span>
      </ng-container>

      <ng-template #notLoading>
        <span>SE CONNECTER</span>
      </ng-template>

    </div>
  </button>
</form>

Arkadiusz Idzikowski staff commented 2 years ago

@estalis Could you provide some more details about your app structure so we can reproduce the problem on our end using the same configuration? Do you use these inputs inside a component with OnPush change detection?

Can you also confirm that you use the latest (2.0.0) version? We added some fixes for this problem in previous updates.

estalis free commented 2 years ago

Yes, I do confirm using MDB 2.0.0.

What do you mean by OnPush change detection ?

Arkadiusz Idzikowski staff commented 2 years ago

@estalis By change detection I meant Angular component ChangeDetectionStrategy settings: https://angular.io/api/core/ChangeDetectionStrategy

We tried to reproduce this problem on our end but without success. Could you please provide a full HTML/TS code and reproduction steps that will help us to recreate the exact same scenario?

estalis free commented 2 years ago

template: https://pastebin.com/LH7X4eg8 component: https://pastebin.com/16Ps4Xvd

estalis free commented 2 years ago

Hello, sorry for the late reply. i have provided code to reproduce the issue. Note that you need to save a password in the browser because it only occurs when the browser is auto completing the inputs.

Arkadiusz Idzikowski staff commented 2 years ago

Thank you for the additional information, it will be very helpful. It looks like components can't detect changes made by browser autocomplete. We will take a closer look at that and update the thread when we find a solution or workaround for now.

Add comment

Arkadiusz Idzikowski staff answered 2 years ago