feat(Search): allow tracking Enter key press (#2600)

packages/core/src/components/Search/Search.tsx

@@ -35,6 +35,7 @@ const Search = forwardRef(
       onFocus,
       onBlur,
       onClear,
+      onKeyDown,
       className,
       ariaExpanded,
       ariaHasPopup,
@@ -53,14 +54,11 @@ const Search = forwardRef(
     });
 
     const onClearButtonClick = useCallback(() => {
-      if (disabled) {
-        return;
-      }
-
+      if (disabled) return;
       inputRef.current?.focus?.();
       clearValue();
       onClear?.();
-    }, [disabled, clearValue]);
+    }, [disabled, clearValue, onClear]);
 
     const SearchIcon = (
       <Icon
@@ -114,6 +112,7 @@ const Search = forwardRef(
         onChange={onEventChanged}
         onBlur={onBlur}
         onFocus={onFocus}
+        onKeyDown={onKeyDown}
         autoComplete={autoComplete}
         size={size}
         wrapperRole="search"

packages/core/src/components/Search/Search.types.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SubIcon, VibeComponentProps } from "../../types";
-import { InputSize } from "../BaseInput/BaseInput.types";
+import { InputSize } from "../BaseInput";
 import IconButton from "../IconButton/IconButton";
 import MenuButton from "../MenuButton/MenuButton";
 
@@ -93,4 +93,8 @@ export interface SearchProps extends VibeComponentProps {
    * Callback function that is called when the clear button is clicked.
    */
   onClear?: () => void;
+  /**
+   * Callback function that is called when a keyboard key is down.
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }

packages/core/src/components/Search/__tests__/Search.test.tsx

@@ -24,19 +24,19 @@ describe("Search", () => {
     expect(queryByLabelText("Clear")).toBeNull();
   });
 
-  it("should display both the search icon and clear icon when input has value", async () => {
+  it("should display both the search icon and clear icon when input has value", () => {
     const { getByTestId, getAllByTestId } = renderSearch({ value: "Test" });
     expect(getAllByTestId("icon")).toHaveLength(2);
     expect(getByTestId("clean-search-button")).toBeInTheDocument();
   });
 
-  it("should clear the input value when the clear icon is clicked", async () => {
+  it("should clear the input value when the clear icon is clicked", () => {
     const { getByRole, getByLabelText } = renderSearch({ value: "Test" });
     userEvent.click(getByLabelText("Clear"));
     expect(getByRole("searchbox")).toHaveValue("");
   });
 
-  it("should display the clear icon once user inputs", async () => {
+  it("should display the clear icon once user inputs", () => {
     const { getByRole, getByTestId } = renderSearch();
     userEvent.type(getByRole("searchbox"), "Test");
     expect(getByTestId("clean-search-button")).toBeInTheDocument();
@@ -63,7 +63,7 @@ describe("Search", () => {
     expect(onClear).toHaveBeenCalled;
   });
 
-  it("should debounce the onChange call", async () => {
+  it("should debounce the onChange call", () => {
     jest.useFakeTimers();
     const onChange = jest.fn();
 
@@ -153,5 +153,33 @@ describe("Search", () => {
       userEvent.tab();
       expect(onBlur).toHaveBeenCalled();
     });
+
+    it("should call onKeyDown when Enter key is pressed", () => {
+      const onKeyDown = jest.fn();
+      const { getByRole } = renderSearch({ onKeyDown });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("{Enter}");
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not call onKeyDown when input is disabled", () => {
+      const onKeyDown = jest.fn();
+      const { getByRole } = renderSearch({ onKeyDown, disabled: true });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("{Enter}");
+      expect(onKeyDown).not.toHaveBeenCalled();
+    });
+
+    it("should call onKeyDown for each character when input is typed with content", () => {
+      const onKeyDown = jest.fn();
+      const string = "Hello, World!";
+      const { getByRole } = renderSearch({ onKeyDown });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.type(input, string);
+      expect(onKeyDown).toHaveBeenCalledTimes(string.length);
+    });
   });
 });