p-password not getting focused on a button click

[prshantsharma]

Describe the bug

I'm using p-password component in my Angular application where I want to focus it on a button click if entered password is invalid.
I followed this below approach but didn't get the expected result:

 <p-password
      #newPasswordInput
      formControlName="newPassword"
      minLength="12"
      maxLength="20"
      [toggleMask]="true"
      placeholder="Enter new password"
      promptLabel="Choose a password"
      weakLabel="Too Simple"
      mediumLabel="Moderate"
      strongLabel="Strong"
      [mediumRegex]="MEDIUM_PASSWORD_REGEX"
      [strongRegex]="STRONG_PASSWORD_REGEX">
      <ng-template pTemplate="footer">
        <p-divider></p-divider>
        <p class="mt-2">Suggestions</p>
        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
          <li>Minimum 12 characters</li>
          <li>At least one lowercase</li>
          <li>At least one uppercase</li>
          <li>At least one numeric</li>
          <li>At least one special character $#^@$!%*,?&+-.</li>
        </ul>
      </ng-template>
 </p-password>

I keep a reference variable #newPasswordInput to p-password and accessing this using ViewChild() in .ts file as shown below:

if (!this.changePasswordForm.controls['newPassword'].valid) {
    this.newPasswordInput.nativeElement.focus();
    return this.toastrService.error(toasterMessage.invalidNewPassword, 'Error');
}

When I click submit button and if this condition is true, getting an error saying Cannot read properties of undefined (reading 'focus')

How can I achieve this or missing something? Please advice!

Environment

Using Angular

Reproducer

No response

Angular version

16.2

PrimeNG version

16.9.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[fsantanac]

The exact same thing happens to me

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,