javascript - Autocomplete for a password with input of type="text"

Question

In a project made in Angular, I have a form with login and password fields. I have an "eye" in the password, clicking which shows the password. After clicking the "eye icon", I replace the password inputs (type = "password" with type = "text"). HTML code below:

<div class="form-group row align-items-center justify-content-center">
              <div class="col-md-2 col-sm-12 col-12">
                <label for="login">
                  {{texts.login}}
                  <span class="required theme-filter"></span>
                  <span class="sr-only">required</span>
                </label>
              </div>
              <div class="col-md-8 col-sm-10 col-10">
                <span class="red-text" *ngFor="let error of collectErrors('login')">{{error.errorMessage}}</span>
                <input id="login" [placeholder]="texts.login" type="text" [class.error-portal]="hasError('login')" class="form-control form-control-portal" formControlName="login" aria-required="true" autocomplete="username">
              </div>
              <div class="col-md-2 col-sm-2 col-2 theme-filter icon-align-middle" appHelp help-for="login:login"></div>
            </div>

            <div class="form-group row align-items-center justify-content-center">
              <div class="col-md-2 col-sm-12 col-12">
                <label for="password">
                  {{texts.password}}
                  <span class="required theme-filter"></span>
                  <span class="sr-only">required</span>
                </label>
              </div>
              <div class="col-md-8 col-sm-10 col-10">
                <span *ngFor="let error of collectErrors('password')" class="red-text">{{error.errorMessage}}</span>
                <div *ngIf="!showPassword" class="has-feedback password-input">
                  <input id="password"
                         [placeholder]="texts.password"
                         type="password"
                         [class.error-portal]="hasError('password')"
                         class="form-control form-control-portal"
                         formControlName="password"
                         aria-required="true"
                         autocomplete="current-password">
                  <span (click)="toggleShowPassword()" class="glyphicon form-control-feedback" style="cursor: pointer; pointer-events: all;">
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-eye-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
                      <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
                    </svg>
                  </span>
                </div>
                <div *ngIf="showPassword" class="has-feedback password-input">
                  <input id="password"
                         [placeholder]="texts.password"
                         type="text"
                         [class.error-portal]="hasError('password')"
                         class="form-control form-control-portal"
                         formControlName="password"
                         aria-required="true"
                         autocomplete="current-password">
                  <span (click)="toggleShowPassword()" class="glyphicon form-control-feedback" style="cursor: pointer; pointer-events: all;">
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-eye-slash-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10.79 12.912l-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z" />
                      <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708l-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829z" />
                      <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z" />
                    </svg>
                  </span>
                </div>

After clicking on the login field, a list with logins and their dotted passwords is displayed (typical behavior for autocomplete). After clicking on a login, the login field is auto-completed and the password is also auto-completed. However, if I click on the "eye icon" to show the password (I replace the input with type = "text" attribute), after clicking on the list with logins, the input with the password is not auto-completed (it remains the same as before clicking on the "eye"). When I click on the "eye" to hide the password, it automatically changes the input with the login to the previous value (which was selected when the password was hidden). Is it even possible to enter the password into the input with the type = "text" attribute from the list of suggested logins with remembered passwords?

Answer 1

等待大神答复