fix(select): fix option selection via initial value (#9272)

**Related Issue:** #4461 ## Summary This fixes an issue where the initial `value` would not match any `option`.
Esri · May 13, 2024 · 5206a0b · 5206a0b
1 parent b52c8eb
commit 5206a0b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts
@@ -1,14 +1,14 @@
 import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
 import {
   accessible,
-  disabled,
   defaults,
+  disabled,
   focusable,
   formAssociated,
+  hidden,
   labelable,
   reflects,
   renders,
-  hidden,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -402,6 +402,19 @@ describe("calcite-select", () => {
     expect(await (await page.find("calcite-select")).getProperty("value")).toBe("");
   });
 
+  it("selects initial value", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`
+      <calcite-select value="">
+        <calcite-option value="uno">One</calcite-option>
+        <calcite-option value="dos">Two</calcite-option>
+        <calcite-option value="">Three</calcite-option>
+      </calcite-select>
+    `);
+
+    await assertSelectedOption(page, await page.find("calcite-option[value='']"));
+  });
+
   describe("is form-associated", () => {
     formAssociated(
       html`

diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
@@ -27,7 +27,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from "../../utils/label";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
   componentFocusable,
   LoadableComponent,
@@ -138,8 +138,7 @@ export class Select
 
   @Watch("value")
   valueHandler(value: string): void {
-    const items = this.el.querySelectorAll("calcite-option");
-    items.forEach((item) => (item.selected = item.value === value));
+    this.updateItemsFromValue(value);
   }
 
   /**
@@ -207,6 +206,10 @@ export class Select
 
   componentWillLoad(): void {
     setUpLoadableComponent(this);
+
+    if (typeof this.value === "string") {
+      this.updateItemsFromValue(this.value);
+    }
   }
 
   componentDidLoad(): void {
@@ -279,6 +282,12 @@ export class Select
     this.setFocus();
   }
 
+  private updateItemsFromValue(value: string): void {
+    this.el
+      .querySelectorAll("calcite-option")
+      .forEach((item) => (item.selected = item.value === value));
+  }
+
   private updateNativeElement(
     optionOrGroup: OptionOrGroup,
     nativeOptionOrGroup: NativeOptionOrGroup,