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) => {