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();
}
};