diff --git a/libs/react-components/specs/dropdown.browser.spec.tsx b/libs/react-components/specs/dropdown.browser.spec.tsx
index 31f6f0a6d..0f7156bbd 100644
--- a/libs/react-components/specs/dropdown.browser.spec.tsx
+++ b/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 (
+
+ {values.map((item) =>
+
+ )}
+
+ );
+ };
+
+ const result = render();
+ 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()
+
+ 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");
+ });
+ })
+ })
});
diff --git a/libs/web-components/src/components/dropdown/Dropdown.svelte b/libs/web-components/src/components/dropdown/Dropdown.svelte
index b1b0b5401..c0ca89b5d 100644
--- a/libs/web-components/src/components/dropdown/Dropdown.svelte
+++ b/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() {
diff --git a/libs/web-components/src/components/dropdown/DropdownItem.svelte b/libs/web-components/src/components/dropdown/DropdownItem.svelte
index 9cb9678ba..f89b38e64 100644
--- a/libs/web-components/src/components/dropdown/DropdownItem.svelte
+++ b/libs/web-components/src/components/dropdown/DropdownItem.svelte
@@ -63,7 +63,7 @@
})
}
- onDestroy(async () => {
+ onDestroy(() => {
relay(
_parentEl,
DropdownItemDestroyMsg,