fix(Input): suggestions selection doesn't call onBlur

lumada-design · Nov 12, 2024 · f2e841a · f2e841a
1 parent 5727641
commit f2e841a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 }}
           />
         </>
       )}