diff --git a/src/components/SearchBox/SearchBox.test.tsx b/src/components/SearchBox/SearchBox.test.tsx index ac0741673..da398b822 100644 --- 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(); + 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(); 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(); + 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(); + 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 index eb36b1b6d..36f89d800 100644 --- 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( onSearch, onClear, placeholder = "Search", + shouldBlurOnSearch = true, shouldRefocusAfterReset, value, ...props @@ -93,12 +98,14 @@ const SearchBox = React.forwardRef( }; const triggerSearch = () => { - onSearch && onSearch(); + onSearch?.(externallyControlled ? value : internalRef.current.value); }; const onKeyDown = (e: KeyboardEvent) => { if (e.key === "Enter" && internalRef.current.checkValidity()) { - internalRef.current.blur(); + if (shouldBlurOnSearch) { + internalRef.current.blur(); + } triggerSearch(); } };