fix: initial value in FAST select control not used when using Angular…

… two-way binding (#5257) * Fixed value set during connect * Change files * Minor fix * Clear previous selection * Apply feedback * Addressed feedback Co-authored-by: Chris Holt <[email protected]>
microsoft · Feb 9, 2022 · b8e71f2 · b8e71f2
1 parent 5f092f6
commit b8e71f2
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 2 deletions.
diff --git a/change/@microsoft-fast-foundation-b6c2d101-5585-4492-8071-d0934d51e44e.json b/change/@microsoft-fast-foundation-b6c2d101-5585-4492-8071-d0934d51e44e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix initial select value when set early after connect",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2168,6 +2168,8 @@ export class Select extends FormAssociatedSelect {
     positionAttribute: SelectPosition;
     // @internal
     selectedIndexChanged(prev: any, next: any): void;
+    // (undocumented)
+    protected setDefaultSelectedOption(): void;
     setPositioning(): void;
     // @internal
     slottedOptionsChanged(prev: any, next: any): void;

diff --git a/packages/web-components/fast-foundation/src/select/select.spec.ts b/packages/web-components/fast-foundation/src/select/select.spec.ts
@@ -135,6 +135,18 @@ describe("Select", () => {
         expect(element.value).to.equal("two");
     });
 
+    it('should return the same value when the value property is set during connect', async () => {
+        const { element, connect, disconnect } = await setup();
+
+        const connectTask = connect();
+        element.value = 'two';
+        await connectTask;
+
+        expect(element.value).to.equal('two');
+
+        await disconnect();
+    });
+
     it("should return the same value when the value property is set after connect", async () => {
         const { element, connect, disconnect } = await setup();
 

diff --git a/packages/web-components/fast-foundation/src/select/select.ts b/packages/web-components/fast-foundation/src/select/select.ts
@@ -7,6 +7,7 @@ import type { ListboxOption } from "../listbox-option/listbox-option";
 import { StartEnd } from "../patterns/start-end";
 import type { StartEndOptions } from "../patterns/start-end";
 import { applyMixins } from "../utilities/apply-mixins";
+import { Listbox } from "../listbox";
 import { FormAssociatedSelect } from "./select.form-associated";
 import { SelectPosition } from "./select.options";
 
@@ -70,7 +71,7 @@ export class Select extends FormAssociatedSelect {
     public set value(next: string) {
         const prev = `${this._value}`;
 
-        if (this.$fastController.isConnected && this.options) {
+        if (this.options?.length) {
             const selectedIndex = this.options.findIndex(el => el.value === next);
 
             const prevSelectedOption = this.options[this.selectedIndex];
@@ -229,7 +230,9 @@ export class Select extends FormAssociatedSelect {
      */
     public formResetCallback(): void {
         this.setProxyOptions();
-        this.setDefaultSelectedOption();
+        // Call the base class's implementation setDefaultSelectedOption instead of the select's
+        // override, in order to reset the selectedIndex without using the value property.
+        super.setDefaultSelectedOption();
         this.value = this.firstSelectedOption.value;
     }
 
@@ -305,6 +308,22 @@ export class Select extends FormAssociatedSelect {
         this.updateValue();
     }
 
+    protected setDefaultSelectedOption(): void {
+        const options: ListboxOption[] =
+            this.options ?? Array.from(this.children).filter(Listbox.slottedOptionFilter);
+
+        const selectedIndex = options?.findIndex(
+            el => el.hasAttribute("selected") || el.selected || el.value === this.value
+        );
+
+        if (selectedIndex !== -1) {
+            this.selectedIndex = selectedIndex;
+            return;
+        }
+
+        this.selectedIndex = 0;
+    }
+
     /**
      * Reset and fill the proxy to match the component's options.
      *