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,