From f2e841ad7efd9893467d4a3f3e5a7c006a01b4c1 Mon Sep 17 00:00:00 2001
From: Bruno Henriques <zettca@users.noreply.github.com>
Date: Mon, 11 Nov 2024 17:13:19 +0000
Subject: [PATCH] fix(Input): suggestions selection doesn't call onBlur

---
 .../core/src/Forms/Suggestions/Suggestions.tsx    |  6 +++++-
 packages/core/src/Input/Input.test.tsx            | 15 +++++++++++++++
 packages/core/src/Input/Input.tsx                 |  4 ++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/Forms/Suggestions/Suggestions.tsx b/packages/core/src/Forms/Suggestions/Suggestions.tsx
index c460741c4f..80ce006e42 100644
--- a/packages/core/src/Forms/Suggestions/Suggestions.tsx
+++ b/packages/core/src/Forms/Suggestions/Suggestions.tsx
@@ -3,7 +3,7 @@ import {
   ClickAwayListener,
   ClickAwayListenerProps,
 } from "@mui/base/ClickAwayListener";
-import { Popper } from "@mui/base/Popper";
+import { Popper, PopperProps } from "@mui/base/Popper";
 import { useForkRef } from "@mui/material/utils";
 import { useTheme, type ExtractNames } from "@hitachivantara/uikit-react-utils";
 
@@ -50,6 +50,8 @@ export interface HvSuggestionsProps extends HvBaseProps {
    * @default false
    * */
   enablePortal?: boolean;
+  /** Props passed to the underlying MUI Popper component */
+  popperProps?: Partial<PopperProps>;
 }
 
 export const HvSuggestions = forwardRef<
@@ -68,6 +70,7 @@ export const HvSuggestions = forwardRef<
     suggestionValues = [],
     onClose,
     onSuggestionSelected,
+    popperProps,
     ...others
   } = props;
 
@@ -114,6 +117,7 @@ export const HvSuggestions = forwardRef<
           className={cx(classes.popper, {
             [classes.portal]: enablePortal,
           })}
+          {...popperProps}
         >
           <HvSelectionList
             className={classes.list}
diff --git a/packages/core/src/Input/Input.test.tsx b/packages/core/src/Input/Input.test.tsx
index e84795370d..e32a81f1e3 100644
--- a/packages/core/src/Input/Input.test.tsx
+++ b/packages/core/src/Input/Input.test.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
 import { Map } from "@hitachivantara/uikit-react-icons";
 
 import { HvInput, HvInputProps } from ".";
@@ -102,4 +103,18 @@ describe("Input", () => {
     await user.click(input);
     expect(screen.getByRole("tooltip")).toBeInTheDocument();
   });
+
+  it("triggers onBlur only when outside the input", async () => {
+    const blurMock = vi.fn();
+    const user = userEvent.setup();
+    render(<Suggestions enablePortal onBlur={blurMock} />);
+
+    const input = screen.getByRole("textbox", {
+      name: "Select a country",
+    });
+    await user.type(input, "value");
+    await user.click(screen.getByRole("option", { name: "value" }));
+
+    expect(blurMock).toHaveBeenCalledTimes(0);
+  });
 });
diff --git a/packages/core/src/Input/Input.tsx b/packages/core/src/Input/Input.tsx
index c8899b8e99..1ad0345109 100644
--- a/packages/core/src/Input/Input.tsx
+++ b/packages/core/src/Input/Input.tsx
@@ -281,7 +281,7 @@ export const HvInput = forwardRef<
 
   const inputRef = useRef<HTMLInputElement>(null);
   const forkedRef = useForkRef(ref, inputRef, inputRefProp);
-  const suggestionsRef = useRef<HTMLElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
 
   const [focused, setFocused] = useState(false);
 
@@ -865,7 +865,6 @@ export const HvInput = forwardRef<
             <div role="presentation" className={classes.inputExtension} />
           )}
           <HvSuggestions
-            ref={suggestionsRef}
             id={setId(elementId, "suggestions")}
             classes={{
               root: classes.suggestionsContainer,
@@ -878,6 +877,7 @@ export const HvInput = forwardRef<
             onSuggestionSelected={suggestionSelectedHandler}
             suggestionValues={suggestionValues}
             enablePortal={enablePortal}
+            popperProps={{ ref: suggestionsRef }}
           />
         </>
       )}