diff --git a/lib/src/Dropdown/Dropdown.test.tsx b/lib/src/Dropdown/Dropdown.test.tsx index f7e32f490..0d7c5b270 100644 --- a/lib/src/Dropdown/Dropdown.test.tsx +++ b/lib/src/Dropdown/Dropdown.test.tsx @@ -144,6 +144,15 @@ describe("Component: Dropdown", () => { act(() => Simulate.change(searchField, { target: { value: "second" } as any })); expect(document.body.querySelectorAll(".custom-control")).toHaveLength(1); + + // if the searchable prop is changed back to false + act(() => { + render({testOptions}, container); + }); + + // The search field should be reset to empty string + // so all the elements should be visible again + expect(document.body.querySelectorAll(".custom-control")).toHaveLength(4); }); it("Should allow the value to be cleared when clearable is enabled", () => { diff --git a/lib/src/Dropdown/Dropdown.tsx b/lib/src/Dropdown/Dropdown.tsx index a486066d1..6e4e66e4b 100644 --- a/lib/src/Dropdown/Dropdown.tsx +++ b/lib/src/Dropdown/Dropdown.tsx @@ -202,6 +202,10 @@ export const Dropdown: React.FC = React.forwardRef( !isMobile && props.multiple && setAllSelected(isAllSelected()); }, [props.value]); + React.useEffect(() => { + !searchable && setSearchKeyword(""); + }, [searchable]); + React.useEffect(() => { if (!isMobile) { const detectBlur = (event: MouseEvent) => {