Password: Add autocomplete property for input

[t4keo]

Describe the feature you would like to see added

I want to use the p-password component because it’s less buggy than the directive (I just opened 2 issues) but I can’t set the "autocomplete" value directly via the component meaning that my browser think that it’s the current-password that I’m trying to set while it's the new one.
This could be avoided by adding an "inputAutocomplete" attribute to the component. This would just translate the inputAutocomplete to [attr.autocomplete]="valueOfInputAutocompleteProperty" and allow us to set it’s type so the browser knows which input means what.

Is your feature request related to a problem?

The pPassword directive is not working well and not like p-password component

Describe the solution you'd like

adding inputAutocomplete property to p-password component.

See : https://developer.mozilla.org/en/docs/Web/HTML/Attributes/autocomplete

Describe alternatives you have considered

No response

Additional context

No response

[t4keo]

#11020

[t4keo]

Linked to issues : #12360 and #12361

[t4keo]

As a dirty workaround, it’s still possible to do this :

@Component({
  selector: 'app-my-component',
  templateUrl: '<p-password #newPwdInput
                [feedback]="true"
                [toggleMask]="true"
                [(ngModel)]="newPassword"
                id="new-password"></p-password>'
})
export class MyComponent implements AfterViewInit {
  @ViewChild('newPwdInput') newPwdInput: Password;
  newPassword: string;

  constructor() {}

  ngAfterViewInit() {
    this.newPwdInput.input.nativeElement.autocomplete = 'new-password';
  }
}

[oleg-varlamov]

The same. We also need the ability to pass attributes to input so that the browser reacts correctly. Waiting for decision...

[aplanos]

In case anyone has the view hidden, and the password input is lazy loaded, for example when the form is loaded on a hidden sidebar, you can use the same approach than @t4keo, but instead using ngAfterViewInit use:

ngAfterViewChecked() { this.newPassword.input.nativeElement.autocomplete = 'new-password'; }

[mertsincan]

Fixed in #11020