feat: dropdown to watch for changes in default option prop (#1317)

Co-authored-by: parsoman <[email protected]>
momentum-design · Aug 8, 2022 · cf40391 · cf40391
1 parent 9692f80
commit cf40391
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/web-components/src/components/dropdown/Dropdown.test.ts b/web-components/src/components/dropdown/Dropdown.test.ts
@@ -234,6 +234,25 @@ describe("Dropdown Component", () => {
     it("should render correct icon name", () => {
       expect(dropdown.shadowRoot!.querySelector("md-icon")!.getAttribute("name")).toEqual("icon-arrow-down_16");
     });
+
+    it("should change selectedKey on update of default option", async () => {
+      const dropdown = await fixture<Dropdown.ELEMENT>(
+        html`
+          <md-dropdown
+            .options="${dropdownObjectLongOptions}"
+            .defaultOption="${dropdownObjectLongOptions[10]}"
+            option-id="id"
+            option-value="country"
+          ></md-dropdown>
+        `
+      );
+      expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[10].id);
+
+      dropdown["defaultOption"] = dropdownObjectLongOptions[1];
+      await elementUpdated(dropdown);
+
+      expect(dropdown["selectedKey"]).toEqual(dropdownObjectLongOptions[1].id);
+    });
   });
 
   describe("List", () => {

diff --git a/web-components/src/components/dropdown/Dropdown.ts b/web-components/src/components/dropdown/Dropdown.ts
@@ -104,6 +104,13 @@ export namespace Dropdown {
         if (name === "disabled") {
           this.setAttribute("tabindex", !this.disabled ? "0" : "-1");
         }
+        if (name === "defaultOption") {
+          if (this.defaultOption) {
+            const { key } = this.getOptionKeyValuePair(this.defaultOption);
+
+            this.selectedKey = key;
+          }
+        }
       });
     }