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

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"
    <label mdbLabel class="form-label">Nom d'utilisateur</label>
    <mdb-error *ngIf="isUsernameInvalid">Champs requis, entre 5 et 30 caractères</mdb-error>

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

  <!-- 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-template #notLoading>
        <span>SE CONNECTER</span>


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:

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 1 year ago

template: component:

estalis free commented 1 year 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 1 year 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.

This problem was fixed in v3.0.0

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 2.0.0
  • Device: --
  • Browser: chrome
  • OS: --
  • Provided sample code: No
  • Provided link: Yes