From f4f011bb23146f3d4d889f6508233be68a06d555 Mon Sep 17 00:00:00 2001
From: lorumic <michele.lorusso@canonical.com>
Date: Mon, 8 Apr 2024 09:20:21 +0200
Subject: [PATCH] fix(searchbox): handle Enter key in the input field to search
 + blur

---
 src/components/SearchBox/SearchBox.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
index 81d5b1ec0..f24f58ee6 100644
--- a/src/components/SearchBox/SearchBox.tsx
+++ b/src/components/SearchBox/SearchBox.tsx
@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { HTMLProps, useRef } from "react";
+import React, { HTMLProps, KeyboardEvent, useRef } from "react";
 
 import Icon from "../Icon";
 
@@ -33,7 +33,7 @@ export type Props = PropsWithSpread<
      */
     onChange?: (inputValue: string) => void;
     /**
-     * A function that is called when the user clicks the search icon
+     * A function that is called when the user clicks the search icon or presses enter
      */
     onSearch?: () => void;
     /**
@@ -91,6 +91,13 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
       onSearch && onSearch();
     };
 
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && internalRef.current.checkValidity()) {
+        internalRef.current.blur();
+        triggerSearch();
+      }
+    };
+
     return (
       <div className={classNames("p-search-box", className)}>
         <label className="u-off-screen" htmlFor="search">
@@ -103,6 +110,7 @@ const SearchBox = React.forwardRef<HTMLInputElement, Props>(
           id="search"
           name="search"
           onChange={(evt) => onChange?.(evt.target.value)}
+          onKeyDown={onKeyDown}
           placeholder={placeholder}
           ref={(input) => {
             internalRef.current = input;