fix(#3072): angular reset and value binding issue

Author: syedszeeshan

libs/angular-components/src/lib/components/base.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Spacing } from "@abgov/ui-components-common";
-import { booleanAttribute, Component, Input } from "@angular/core";
+import { booleanAttribute, Component, Input, ElementRef } from "@angular/core";
 import { ControlValueAccessor } from "@angular/forms";
 
 @Component({
@@ -87,12 +87,71 @@ export abstract class GoabControlValueAccessor
     }
   }
 
+  /**
+   * Returns the CSS selector for the native element that this component wraps.
+   * Used by writeValue to update the element's value attribute.
+   * Override this method in subclasses that use the default writeValue implementation.
+   * @returns {string} The CSS selector (e.g., "goa-input", "goa-textarea").
+   */
+  protected getElementSelector(): string {
+    return "";
+  }
+
+  /**
+   * Returns the ElementRef for this component.
+   * Override this method in subclasses that use the default writeValue implementation.
+   * @returns {ElementRef} The ElementRef instance.
+   */
+  protected getElementRef(): ElementRef {
+    return null as any;
+  }
+
+  /**
+   * Returns the name of the attribute to set when writing a value.
+   * Defaults to "value". Override to use a different attribute (e.g., "checked" for checkboxes).
+   * @returns {string} The attribute name.
+   */
+  protected getValueAttributeName(): string {
+    return "value";
+  }
+
+  /**
+   * Converts the value to a string for setting the attribute.
+   * Override this method to customize how values are converted (e.g., for boolean checkboxes).
+   * @param {unknown} value - The value to convert.
+   * @returns {string} The string representation of the value.
+   */
+  protected convertValueToAttribute(value: unknown): string {
+    if (value === null || value === undefined || value === "") {
+      return "";
+    }
+    return String(value);
+  }
+
+  /**
+   * Hook called before setting the DOM attribute.
+   * Override to perform additional actions (e.g., setting this.checked for checkboxes).
+   * @param {unknown} _value - The value being written.
+   */
+  protected beforeWriteValue(_value: unknown): void {
+    // Default: no action
+  }
+
   /**
    * Writes a new value to the form control.
    * @param {unknown} value - The value to write.
    */
   public writeValue(value: unknown): void {
     this.value = value;
+    this.beforeWriteValue(value);
+
+    const el: HTMLElement | null = this.getElementRef()?.nativeElement?.querySelector(this.getElementSelector());
+
+    if (el) {
+      const attributeName = this.getValueAttributeName();
+      const attributeValue = this.convertValueToAttribute(value);
+      el.setAttribute(attributeName, attributeValue);
+    }
   }
 
   /**

libs/angular-components/src/lib/components/checkbox/checkbox.spec.ts

@@ -106,6 +106,49 @@ describe("GoabCheckbox", () => {
 
     expect(onChange).toHaveBeenCalled();
   });
+
+  describe("writeValue", () => {
+    it("should set checked attribute to true when value is truthy", () => {
+      const checkboxComponent = fixture.debugElement.query(By.css("goab-checkbox")).componentInstance;
+      const checkboxElement = fixture.debugElement.query(By.css("goa-checkbox")).nativeElement;
+
+      checkboxComponent.writeValue(true);
+      expect(checkboxElement.getAttribute("checked")).toBe("true");
+
+      checkboxComponent.writeValue("some value");
+      expect(checkboxElement.getAttribute("checked")).toBe("true");
+
+      checkboxComponent.writeValue(1);
+      expect(checkboxElement.getAttribute("checked")).toBe("true");
+    });
+
+    it("should set checked attribute to false when value is falsy", () => {
+      const checkboxComponent = fixture.debugElement.query(By.css("goab-checkbox")).componentInstance;
+      const checkboxElement = fixture.debugElement.query(By.css("goa-checkbox")).nativeElement;
+
+      checkboxComponent.writeValue(false);
+      expect(checkboxElement.getAttribute("checked")).toBe("false");
+
+      checkboxComponent.writeValue(null);
+      expect(checkboxElement.getAttribute("checked")).toBe("false");
+
+      checkboxComponent.writeValue(undefined);
+      expect(checkboxElement.getAttribute("checked")).toBe("false");
+
+      checkboxComponent.writeValue("");
+      expect(checkboxElement.getAttribute("checked")).toBe("false");
+    });
+
+    it("should update component value property", () => {
+      const checkboxComponent = fixture.debugElement.query(By.css("goab-checkbox")).componentInstance;
+
+      checkboxComponent.writeValue(true);
+      expect(checkboxComponent.value).toBe(true);
+
+      checkboxComponent.writeValue(null);
+      expect(checkboxComponent.value).toBe(null);
+    });
+  });
 });
 
 @Component({

libs/angular-components/src/lib/components/checkbox/checkbox.ts

@@ -8,6 +8,7 @@ import {
   forwardRef,
   TemplateRef,
   booleanAttribute,
+  ElementRef,
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { NgIf, NgTemplateOutlet } from "@angular/common";
@@ -60,7 +61,7 @@ export class GoabCheckbox extends GoabControlValueAccessor {
   @Input({ transform: booleanAttribute }) indeterminate?: boolean;
   @Input() text?: string;
   // ** NOTE: can we just use the base component for this?
-  @Input() override value?: string | number | boolean;
+  @Input() override value?: string | number | boolean | null;
   @Input() ariaLabel?: string;
   @Input() description!: string | TemplateRef<any>;
   @Input() reveal?: TemplateRef<any>;
@@ -69,6 +70,34 @@ export class GoabCheckbox extends GoabControlValueAccessor {
 
   @Output() onChange = new EventEmitter<GoabCheckboxOnChangeDetail>();
 
+  constructor(protected elementRef: ElementRef) {
+    super();
+  }
+
+  protected override getElementSelector(): string {
+    return "goa-checkbox";
+  }
+
+  protected override getElementRef(): ElementRef {
+    return this.elementRef;
+  }
+
+  protected override getValueAttributeName(): string {
+    return "checked";
+  }
+
+  protected override convertValueToAttribute(value: unknown): string {
+    if (value === null || value === undefined || value === false || value === "") {
+      return "false";
+    }
+    return "true";
+  }
+
+  protected override beforeWriteValue(value: unknown): void {
+    this.value = value as string | number | boolean | null;
+    this.checked = !!value;
+  }
+
   getDescriptionAsString(): string {
     return typeof this.description === "string" ? this.description : "";
   }

libs/angular-components/src/lib/components/dropdown/dropdown.spec.ts

@@ -149,4 +149,79 @@ describe("GoABDropdown", () => {
     );
     expect(onChangeMock).toHaveBeenCalled();
   });
+
+  describe("writeValue", () => {
+    it("should set value attribute when writeValue is called with a value", () => {
+      const dropdownComponent = fixture.debugElement.query(By.css("goab-dropdown")).componentInstance;
+      const dropdownElement = fixture.debugElement.query(By.css("goa-dropdown")).nativeElement;
+
+      dropdownComponent.writeValue("red");
+      expect(dropdownElement.getAttribute("value")).toBe("red");
+
+      dropdownComponent.writeValue("blue");
+      expect(dropdownElement.getAttribute("value")).toBe("blue");
+    });
+
+    it("should set value attribute to empty string when writeValue is called with null", () => {
+      const dropdownComponent = fixture.debugElement.query(By.css("goab-dropdown")).componentInstance;
+      const dropdownElement = fixture.debugElement.query(By.css("goa-dropdown")).nativeElement;
+
+      // First set a value
+      dropdownComponent.writeValue("red");
+      expect(dropdownElement.getAttribute("value")).toBe("red");
+
+      // Then clear it
+      dropdownComponent.writeValue(null);
+      expect(dropdownElement.getAttribute("value")).toBe("");
+    });
+
+    it("should update component value property", () => {
+      const dropdownComponent = fixture.debugElement.query(By.css("goab-dropdown")).componentInstance;
+
+      dropdownComponent.writeValue("yellow");
+      expect(dropdownComponent.value).toBe("yellow");
+
+      dropdownComponent.writeValue(null);
+      expect(dropdownComponent.value).toBe(null);
+    });
+  });
+
+  describe("_onChange", () => {
+    it("should update component value when user selects an option", () => {
+      const dropdownComponent = fixture.debugElement.query(By.css("goab-dropdown")).componentInstance;
+      const dropdownElement = fixture.debugElement.query(By.css("goa-dropdown")).nativeElement;
+
+      fireEvent(
+        dropdownElement,
+        new CustomEvent("_change", {
+          detail: { name: component.name, value: "yellow" },
+        }),
+      );
+
+      expect(dropdownComponent.value).toBe("yellow");
+    });
+
+    it("should update value to null when cleared", () => {
+      const dropdownComponent = fixture.debugElement.query(By.css("goab-dropdown")).componentInstance;
+      const dropdownElement = fixture.debugElement.query(By.css("goa-dropdown")).nativeElement;
+
+      // Set initial value
+      fireEvent(
+        dropdownElement,
+        new CustomEvent("_change", {
+          detail: { name: component.name, value: "red" },
+        }),
+      );
+      expect(dropdownComponent.value).toBe("red");
+
+      // Clear value
+      fireEvent(
+        dropdownElement,
+        new CustomEvent("_change", {
+          detail: { name: component.name, value: "" },
+        }),
+      );
+      expect(dropdownComponent.value).toBe(null);
+    });
+  });
 });

libs/angular-components/src/lib/components/dropdown/dropdown.ts

@@ -7,6 +7,7 @@ import {
   Output,
   booleanAttribute,
   forwardRef,
+  ElementRef,
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { GoabControlValueAccessor } from "../base.component";
@@ -18,7 +19,7 @@ import { GoabControlValueAccessor } from "../base.component";
   template: `
     <goa-dropdown
       [attr.name]="name"
-      [value]="value"
+      [attr.value]="value"
       [attr.arialabel]="ariaLabel"
       [attr.arialabelledby]="ariaLabelledBy"
       [disabled]="disabled"
@@ -73,11 +74,26 @@ export class GoabDropdown extends GoabControlValueAccessor {
 
   @Output() onChange = new EventEmitter<GoabDropdownOnChangeDetail>();
 
+  constructor(protected elementRef: ElementRef) {
+    super();
+  }
+
+  protected override getElementSelector(): string {
+    return "goa-dropdown";
+  }
+
+  protected override getElementRef(): ElementRef {
+    return this.elementRef;
+  }
+
   _onChange(e: Event) {
     const detail = (e as CustomEvent<GoabDropdownOnChangeDetail>).detail;
+
+    // Update the local value first to stay in sync
+    this.value = detail.value || null;
     this.onChange.emit(detail);
 
     this.markAsTouched();
     this.fcChange?.(detail.value || "");
   }
-}
+}

libs/angular-components/src/lib/components/input/input.spec.ts

@@ -261,6 +261,52 @@ describe("GoABInput", () => {
     expect(trailingContent).toBeTruthy();
     expect(trailingContent.textContent).toContain("Trailing Content");
   });
+
+  describe("writeValue", () => {
+    it("should set value attribute when writeValue is called", () => {
+      const inputComponent = fixture.debugElement.query(By.css("goab-input")).componentInstance;
+      const inputElement = fixture.debugElement.query(By.css("goa-input")).nativeElement;
+
+      inputComponent.writeValue("new value");
+      expect(inputElement.getAttribute("value")).toBe("new value");
+
+      inputComponent.writeValue("another value");
+      expect(inputElement.getAttribute("value")).toBe("another value");
+    });
+
+    it("should set value attribute to empty string when writeValue is called with null or empty", () => {
+      const inputComponent = fixture.debugElement.query(By.css("goab-input")).componentInstance;
+      const inputElement = fixture.debugElement.query(By.css("goa-input")).nativeElement;
+
+      // First set a value
+      inputComponent.writeValue("some value");
+      expect(inputElement.getAttribute("value")).toBe("some value");
+
+      // Then clear it with null
+      inputComponent.writeValue(null);
+      expect(inputElement.getAttribute("value")).toBe("");
+
+      // Set again and clear with undefined
+      inputComponent.writeValue("test");
+      inputComponent.writeValue(undefined);
+      expect(inputElement.getAttribute("value")).toBe("");
+
+      // Set again and clear with empty string
+      inputComponent.writeValue("test2");
+      inputComponent.writeValue("");
+      expect(inputElement.getAttribute("value")).toBe("");
+    });
+
+    it("should update component value property", () => {
+      const inputComponent = fixture.debugElement.query(By.css("goab-input")).componentInstance;
+
+      inputComponent.writeValue("updated");
+      expect(inputComponent.value).toBe("updated");
+
+      inputComponent.writeValue(null);
+      expect(inputComponent.value).toBe(null);
+    });
+  });
 });
 
 @Component({

libs/angular-components/src/lib/components/input/input.ts

@@ -18,6 +18,7 @@ import {
   booleanAttribute,
   numberAttribute,
   TemplateRef,
+  ElementRef,
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { GoabControlValueAccessor } from "../base.component";
@@ -139,13 +140,25 @@ export class GoabInput extends GoabControlValueAccessor implements OnInit {
 
   handleTrailingIconClick = false;
 
+  constructor(protected elementRef: ElementRef) {
+    super();
+  }
+
   ngOnInit() {
     this.handleTrailingIconClick = this.onTrailingIconClick.observed;
     if (typeof this.value === "number") {
       console.warn("For numeric values use goab-input-number.");
     }
   }
 
+  protected override getElementSelector(): string {
+    return "goa-input";
+  }
+
+  protected override getElementRef(): ElementRef {
+    return this.elementRef;
+  }
+
   _onTrailingIconClick(_: Event) {
     if (this.handleTrailingIconClick) {
       this.onTrailingIconClick.emit();