From e76a0ccfe896c68a85a75a3b1fd4c4ac628f6cee Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Tue, 9 Jul 2024 13:00:53 -0700 Subject: [PATCH] [PM-8524] Add optional passwordInput to BitPasswordInputToggle to support conditionally rendered password toggle buttons --- .../password-input-toggle.directive.ts | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/libs/components/src/form-field/password-input-toggle.directive.ts b/libs/components/src/form-field/password-input-toggle.directive.ts index 9c5047351fd..133c24d41d1 100644 --- a/libs/components/src/form-field/password-input-toggle.directive.ts +++ b/libs/components/src/form-field/password-input-toggle.directive.ts @@ -29,6 +29,17 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan @HostBinding("attr.title") title = this.i18nService.t("toggleVisibility"); @HostBinding("attr.aria-label") label = this.i18nService.t("toggleVisibility"); + /** + * Optional input control element to toggle the type of. If not provided, it will use the input element from the parent form field. + * Primarily used for scenarios where the toggle button is used with an *ngIf directive and the parent form field may be unavailable. + */ + @Input() + passwordInput?: HTMLInputElement; + + get formFieldInput() { + return this.passwordInput ?? this.formField.input; + } + /** * Click handler to toggle the state of the input type. */ @@ -38,7 +49,7 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan this.update(); - this.formField.input?.focus(); + this.formFieldInput?.focus(); } constructor( @@ -56,15 +67,15 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan } ngAfterContentInit(): void { - this.toggled = this.formField.input.type !== "password"; + this.toggled = this.formFieldInput?.type !== "password"; this.button.icon = this.icon; } private update() { this.button.icon = this.icon; - if (this.formField.input?.type != null) { - this.formField.input.type = this.toggled ? "text" : "password"; - this.formField.input.spellcheck = this.toggled ? false : undefined; + if (this.formFieldInput?.type != null) { + this.formFieldInput.type = this.toggled ? "text" : "password"; + this.formFieldInput.spellcheck = this.toggled ? false : undefined; } } }