feat: support not blurring when searching

canonical · Aug 20, 2024 · 2339e4c · 2339e4c
1 parent 92ff5f6
commit 2339e4c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/components/SearchBox/SearchBox.test.tsx b/src/components/SearchBox/SearchBox.test.tsx
@@ -32,8 +32,16 @@ describe("SearchBox ", () => {
   it("should call onSearch prop", async () => {
     const onSearchMock = jest.fn();
     render(<SearchBox onSearch={onSearchMock} />);
+    await userEvent.type(screen.getByRole("searchbox"), "test");
+    await userEvent.click(screen.getByRole("button", { name: Label.Search }));
+    expect(onSearchMock).toHaveBeenCalledWith("test");
+  });
+
+  it("should call onSearch prop when externally controlled", async () => {
+    const onSearchMock = jest.fn();
+    render(<SearchBox onSearch={onSearchMock} value="externalvalue" />);
     await userEvent.click(screen.getByRole("button", { name: Label.Search }));
-    expect(onSearchMock).toBeCalled();
+    expect(onSearchMock).toHaveBeenCalledWith("externalvalue");
   });
 
   it("should call onChange prop", async () => {
@@ -102,4 +110,22 @@ describe("SearchBox ", () => {
     await userEvent.click(screen.getByRole("button", { name: Label.Clear }));
     expect(handleOnClear).toBeCalled();
   });
+
+  it("blurs when searching", async () => {
+    render(<SearchBox />);
+    const searchInput = screen.getByRole("searchbox");
+    await userEvent.type(screen.getByRole("searchbox"), "test");
+    expect(searchInput).toHaveFocus();
+    await userEvent.type(screen.getByRole("searchbox"), "{Enter}");
+    expect(searchInput).not.toHaveFocus();
+  });
+
+  it("can not blur when searching", async () => {
+    render(<SearchBox shouldBlurOnSearch={false} />);
+    const searchInput = screen.getByRole("searchbox");
+    await userEvent.type(screen.getByRole("searchbox"), "test");
+    expect(searchInput).toHaveFocus();
+    await userEvent.type(screen.getByRole("searchbox"), "{Enter}");
+    expect(searchInput).toHaveFocus();
+  });
 });
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -35,7 +35,7 @@ export type Props = PropsWithSpread<
     /**
      * A function that is called when the user clicks the search icon or presses enter
      */
-    onSearch?: () => void;
+    onSearch?: (inputValue: string) => void;
     /**
      * A function that is called when the user clicks the reset icon
      */
@@ -44,6 +44,10 @@ export type Props = PropsWithSpread<
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search input should lose focus when searching.
+     */
+    shouldBlurOnSearch?: boolean;
     /**
      * Whether the search input should receive focus after pressing the reset button
      */
@@ -76,6 +80,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
       onSearch,
       onClear,
       placeholder = "Search",
+      shouldBlurOnSearch = true,
       shouldRefocusAfterReset,
       value,
       ...props
@@ -93,12 +98,14 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
     };
 
     const triggerSearch = () => {
-      onSearch && onSearch();
+      onSearch?.(externallyControlled ? value : internalRef.current.value);
     };
 
     const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
       if (e.key === "Enter" && internalRef.current.checkValidity()) {
-        internalRef.current.blur();
+        if (shouldBlurOnSearch) {
+          internalRef.current.blur();
+        }
         triggerSearch();
       }
     };