From cf40391ab139ccf21e1b6a5ab57186db165f6a15 Mon Sep 17 00:00:00 2001
From: Saurabh Sohoni <sohonisaurabh@ymail.com>
Date: Mon, 8 Aug 2022 11:48:49 +0530
Subject: [PATCH] feat: dropdown to watch for changes in default option prop
 (#1317)

Co-authored-by: parsoman <79962822+parsoman@users.noreply.github.com>
---
 .../src/components/dropdown/Dropdown.test.ts  | 19 +++++++++++++++++++
 .../src/components/dropdown/Dropdown.ts       |  7 +++++++
 2 files changed, 26 insertions(+)

diff --git a/web-components/src/components/dropdown/Dropdown.test.ts b/web-components/src/components/dropdown/Dropdown.test.ts
index d2d3d9c356..c6d15bbab6 100644
--- 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
index 7c3153415c..1c54259425 100644
--- 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;
+          }
+        }
       });
     }