feat(Search): allow tracking Enter key press

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

@@ -35,6 +35,7 @@ const Search = forwardRef(
       onFocus,
       onBlur,
       onClear,
+      onEnterKey,
       className,
       ariaExpanded,
       ariaHasPopup,
@@ -53,14 +54,19 @@ const Search = forwardRef(
     });
 
     const onClearButtonClick = useCallback(() => {
-      if (disabled) {
-        return;
-      }
-
+      if (disabled) return;
       inputRef.current?.focus?.();
       clearValue();
       onClear?.();
-    }, [disabled, clearValue]);
+    }, [disabled, clearValue, onClear]);
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (disabled || event.key !== "Enter") return;
+        onEnterKey?.(event);
+      },
+      [disabled, onEnterKey]
+    );
 
     const SearchIcon = (
       <Icon
@@ -114,6 +120,7 @@ const Search = forwardRef(
         onChange={onEventChanged}
         onBlur={onBlur}
         onFocus={onFocus}
+        onKeyDown={handleKeyDown}
         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 the Enter keyboard key is down.
+   */
+  onEnterKey?: (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,42 @@ describe("Search", () => {
       userEvent.tab();
       expect(onBlur).toHaveBeenCalled();
     });
+
+    it("should call onEnterKey when Enter key is pressed", () => {
+      const onEnterKey = jest.fn();
+      const { getByRole } = renderSearch({ onEnterKey });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("{Enter}");
+      expect(onEnterKey).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not call onEnterKey when other keys are pressed", () => {
+      const onEnterKey = jest.fn();
+      const { getByRole } = renderSearch({ onEnterKey });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("a");
+      expect(onEnterKey).not.toHaveBeenCalled();
+    });
+
+    it("should not call onEnterKey when input is disabled", () => {
+      const onEnterKey = jest.fn();
+      const { getByRole } = renderSearch({ onEnterKey, disabled: true });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.keyboard("{Enter}");
+      expect(onEnterKey).not.toHaveBeenCalled();
+    });
+
+    it("should call onEnterKey when input has content and Enter is pressed", () => {
+      const onEnterKey = jest.fn();
+      const { getByRole } = renderSearch({ onEnterKey });
+      const input = getByRole("searchbox");
+      userEvent.click(input);
+      userEvent.type(input, "Hello, World!");
+      userEvent.keyboard("{Enter}");
+      expect(onEnterKey).toHaveBeenCalledTimes(1);
+    });
   });
 });