fix(web-components): text-input setValidity fails if control is not available (#34372)

Author: radium-v

change/@fluentui-web-components-9406853b-9f9d-4ff9-8825-9aeb0c8ecce0.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: text-input setValidity fails if control is not available",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -868,6 +868,8 @@ export class BaseTextInput extends FASTElement {
     // @internal
     control: HTMLInputElement;
     // @internal
+    controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void;
+    // @internal
     controlLabel: HTMLLabelElement;
     currentValue: string;
     // @internal

packages/web-components/src/text-input/text-input.base.ts

@@ -292,8 +292,21 @@ export class BaseTextInput extends FASTElement {
    *
    * @internal
    */
+  @observable
   public control!: HTMLInputElement;
 
+  /**
+   * Calls the `setValidity` method when the control reference changes.
+   *
+   * @param prev - the previous control reference
+   * @param next - the current control reference
+   *
+   * @internal
+   */
+  public controlChanged(prev: HTMLInputElement | undefined, next: HTMLInputElement | undefined): void {
+    this.setValidity();
+  }
+
   /**
    * A reference to the internal label element.
    *
@@ -589,18 +602,18 @@ export class BaseTextInput extends FASTElement {
    *
    * @internal
    */
-  public setValidity(
-    flags: Partial<ValidityState> = this.control.validity,
-    message: string = this.validationMessage,
-    anchor: HTMLElement = this.control,
-  ): void {
-    if (this.$fastController.isConnected) {
+  public setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void {
+    if (this.$fastController.isConnected && this.control) {
       if (this.disabled) {
         this.elementInternals.setValidity({});
         return;
       }
 
-      this.elementInternals.setValidity(flags, message, anchor);
+      this.elementInternals.setValidity(
+        flags ?? this.control.validity,
+        message ?? this.validationMessage,
+        anchor ?? this.control,
+      );
     }
   }
 }