From c2ed8572bab7aabc388e2e288bf90ef4ca6108df Mon Sep 17 00:00:00 2001
From: Mario Subotic <mario.subotic@gmail.com>
Date: Wed, 5 May 2021 16:35:47 +0800
Subject: [PATCH] fix(dropdown): fix stale search keyword

fix the dropdown so when the searchable prop changes dynamically the search keyword is reset

fix #601
---
 lib/src/Dropdown/Dropdown.test.tsx | 9 +++++++++
 lib/src/Dropdown/Dropdown.tsx      | 4 ++++
 2 files changed, 13 insertions(+)

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(<Dropdown>{testOptions}</Dropdown>, 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<DropdownProps> = React.forwardRef(
             !isMobile && props.multiple && setAllSelected(isAllSelected());
         }, [props.value]);
 
+        React.useEffect(() => {
+            !searchable && setSearchKeyword("");
+        }, [searchable]);
+
         React.useEffect(() => {
             if (!isMobile) {
                 const detectBlur = (event: MouseEvent) => {