fix(use-input): sync the inputValue with domRef.current.value when hovering the input

.changeset/angry-icons-jump.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+sync the inputValue with domRef.current.value when hovering the input

packages/components/input/__tests__/input.test.tsx

@@ -180,6 +180,23 @@ describe("Input", () => {
 
     expect(inputs[1]).toBeVisible();
   });
+
+  it("should sync ref.current.value with input's value after hovering over the input", async () => {
+    const ref = React.createRef<HTMLInputElement>();
+
+    const {container} = render(<Input ref={ref} value="value" />);
+    const inputBase = container.querySelector("[data-slot='base']");
+    const input = inputBase && inputBase.querySelector("input");
+    const user = userEvent.setup();
+
+    if (!input) throw new Error("input is null");
+    if (!ref.current) throw new Error("ref is null");
+
+    ref.current.value = "new value";
+    await user.hover(inputBase);
+
+    expect(input).toHaveValue("new value");
+  });
 });
 
 describe("Input with React Hook Form", () => {

packages/components/input/src/use-input.ts

@@ -205,7 +205,13 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     isTextInput: true,
   });
 
-  const {isHovered, hoverProps} = useHover({isDisabled: !!originalProps?.isDisabled});
+  const {isHovered, hoverProps} = useHover({
+    isDisabled: !!originalProps?.isDisabled,
+    onHoverStart: () => {
+      if (!domRef.current) return;
+      setInputValue(domRef.current.value);
+    },
+  });
 
   const {focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible} = useFocusRing();