Merge branch '#15386-search_bar_returns_result_even_enable_clientside…

…_search_is_enabled' of https://github.com/Naveen-Goud/appsmith into external-contri/#15386-search_bar_returns_result_even_enable_clientside_search_is_enabled
appsmithorg · Oct 14, 2024 · 37a01a9 · 37a01a9
2 parents c6fa093 + aeb03fe
commit 37a01a9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/app/client/packages/design-system/widgets-old/src/SearchComponent/index.test.tsx b/app/client/packages/design-system/widgets-old/src/SearchComponent/index.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { render, fireEvent, act } from "@testing-library/react";
 import SearchComponent from "../SearchComponent";
-import "@testing-library/jest-dom"
+import "@testing-library/jest-dom";
 
 // Mocking the debounce function to call the function immediately
 jest.mock("lodash", () => ({
@@ -23,7 +23,7 @@ describe("SearchComponent", () => {
         placeholder="Search..."
         value=""
         {...props}
-      />
+      />,
     );
   };
 
@@ -33,9 +33,7 @@ describe("SearchComponent", () => {
     });
     const inputElement = getByPlaceholderText("Search...") as HTMLInputElement;
 
-    act(() => {
-      fireEvent.change(inputElement, { target: { value: "test" } });
-    });
+    fireEvent.change(inputElement, { target: { value: "test" } });
 
     expect(inputElement.value).toBe("test");
     expect(onSearchMock).toHaveBeenCalledWith("test");
@@ -49,9 +47,7 @@ describe("SearchComponent", () => {
     const inputElement = getByPlaceholderText("Search...") as HTMLInputElement;
     const clearButton = getByTestId("cross-icon");
 
-    act(() => {
-      fireEvent.click(clearButton);
-    });
+    fireEvent.click(clearButton);
 
     expect(inputElement.value).toBe("");
     expect(onSearchMock).toHaveBeenCalledWith("");
@@ -65,7 +61,13 @@ describe("SearchComponent", () => {
     const inputElement = getByPlaceholderText("Search...") as HTMLInputElement;
     expect(inputElement.value).toBe("initial");
 
-    rerender(<SearchComponent onSearch={onSearchMock} placeholder="Search..." value="updated" />);
+    rerender(
+      <SearchComponent
+        onSearch={onSearchMock}
+        placeholder="Search..."
+        value="updated"
+      />,
+    );
 
     expect(inputElement.value).toBe("updated");
   });
@@ -76,12 +78,19 @@ describe("SearchComponent", () => {
       value: "initial",
     });
 
-    const inputElement = getByPlaceholderText("Search...")as HTMLInputElement;
+    const inputElement = getByPlaceholderText("Search...") as HTMLInputElement;
     expect(inputElement.value).toBe("initial");
 
-    rerender(<SearchComponent onSearch={onSearchMock} value="" placeholder="Search..." enableClientSideSearch={false} />);
+    rerender(
+      <SearchComponent
+        onSearch={onSearchMock}
+        value=""
+        placeholder="Search..."
+        enableClientSideSearch={false}
+      />,
+    );
 
     expect(inputElement.value).toBe("");
     expect(onSearchMock).toHaveBeenCalledWith("");
   });
-});
+});
diff --git a/app/client/packages/design-system/widgets-old/src/SearchComponent/index.tsx b/app/client/packages/design-system/widgets-old/src/SearchComponent/index.tsx
@@ -100,10 +100,12 @@ class SearchComponent extends React.Component<
       this.setState({ localValue: this.props.value });
     }
 
-    if (prevProps.enableClientSideSearch !== this.props.enableClientSideSearch) {
+    if (
+      prevProps.enableClientSideSearch !== this.props.enableClientSideSearch
+    ) {
       this.setState({ localValue: "" }, () => {
         // Trigger search with an empty value to reset the table
-      this.props.onSearch("");
+        this.props.onSearch("");
       });
     }
   }
@@ -117,8 +119,8 @@ class SearchComponent extends React.Component<
 
     this.setState({ localValue: search });
     if (this.props.enableClientSideSearch) {
-        this.onDebouncedSearch(search);
-      }
+      this.onDebouncedSearch(search);
+    }
   };
   clearSearch = () => {
     this.setState({ localValue: "" });