fix(#2333): ensure dropdown items are kept in sync when changed

libs/react-components/specs/dropdown.browser.spec.tsx

@@ -585,4 +585,48 @@ describe("Dropdown", () => {
       });
     })
   })
+
+  describe("Dropdown reset", () => {
+    it("should reduce the number of element displayed within the dropdown", async () => {
+      let values: string[] = ["red", "blue", "green"]
+
+      const Component = () => {
+        return (
+          <GoabDropdown name="favcolor" onChange={noop}>
+            {values.map((item) =>
+              <GoabDropdownItem label={item} value={item} key={item} />
+            )}
+          </GoabDropdown>
+        );
+      };
+
+      const result = render(<Component />);
+      const input = result.getByRole("combobox");
+      const items = result.getByRole("option");
+
+      // Initial state
+
+      await vi.waitFor(async () => {
+        const inputEl = input.element() as HTMLInputElement
+        inputEl.click();
+        expect(items.elements().length).toBe(values.length);
+        items.elements().forEach((el, index) => {
+          expect(el.innerHTML.trim()).toBe(values[index]);
+        })
+      });
+
+      // Reduce to 1 item
+
+      values = ["blue"]; // the previous failure happened with this item, was one of the previous items
+      result.rerender(<Component />)
+
+      await vi.waitFor(async () => {
+        const inputEl = input.element() as HTMLInputElement
+        inputEl.click();
+        const items = result.getByRole("option");
+        expect(items.elements().length).toBe(1);
+        expect(items.element().innerHTML.trim()).toBe("blue");
+      });
+    })
+  })
 });

libs/web-components/src/components/dropdown/Dropdown.svelte

@@ -105,8 +105,6 @@
 
   let _bindTimeoutId: any;
 
-  let _mountStatus: "active" | "ready" = "ready";
-  let _mountTimeoutId: any = undefined;
   let _error = toBoolean(error);
   let _prevError = _error;
 
@@ -303,6 +301,7 @@
    */
   function onChildDestroyed(detail: DropdownItemDestroyRelayDetail) {
     _options = _options.filter((option) => option.value !== detail.value);
+    syncFilteredOptions();
   }
 
   function setSelected() {

libs/web-components/src/components/dropdown/DropdownItem.svelte

@@ -63,7 +63,7 @@
     })
   }
 
-  onDestroy(async () => {
+  onDestroy(() => {
     relay<DropdownItemDestroyRelayDetail>(
       _parentEl,
       DropdownItemDestroyMsg,