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 or tabbing the input (#3024, #3436)

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {render, renderHook, fireEvent} from "@testing-library/react";
+import {render, renderHook, fireEvent, act} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
 
@@ -180,6 +180,54 @@ describe("Input", () => {
 
     expect(inputs[1]).toBeVisible();
   });
+
+  it("should sync ref.current.value with input's value after clicking the input", async () => {
+    const user = userEvent.setup();
+    const ref = React.createRef<HTMLInputElement>();
+
+    const {container} = render(<Input ref={ref} value="value" />);
+
+    expect(ref.current).not.toBeNull();
+
+    const inputBase = container.querySelector("[data-slot='base']");
+
+    expect(inputBase).not.toBeNull();
+
+    const input = container.querySelector("input");
+
+    expect(input).not.toBeNull();
+
+    ref.current!.value = "new value";
+
+    await act(async () => {
+      await user.click(inputBase!);
+    });
+    expect(input).toHaveValue("new value");
+  });
+});
+
+it("should sync ref.current.value with input's value after hovering the input", async () => {
+  const user = userEvent.setup();
+  const ref = React.createRef<HTMLInputElement>();
+
+  const {container} = render(<Input ref={ref} value="value" />);
+
+  expect(ref.current).not.toBeNull();
+
+  const inputBase = container.querySelector("[data-slot='base']");
+
+  expect(inputBase).not.toBeNull();
+
+  const input = container.querySelector("input");
+
+  expect(input).not.toBeNull();
+
+  ref.current!.value = "new value";
+
+  await act(async () => {
+    await user.hover(inputBase!);
+  });
+  expect(input).toHaveValue("new value");
 });
 
 describe("Input with React Hook Form", () => {

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

@@ -158,6 +158,10 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     domRef.current?.focus();
   }, [setInputValue, onClear]);
 
+  const syncRefValueToInputValue = () => {
+    setInputValue(domRef.current?.value);
+  };
+
   // if we use `react-hook-form`, it will set the input value using the ref in register
   // i.e. setting ref.current.value to something which is uncontrolled
   // hence, sync the state with `ref.current.value`
@@ -205,7 +209,10 @@ 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: syncRefValueToInputValue,
+  });
 
   const {focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible} = useFocusRing();
 
@@ -216,6 +223,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const {pressProps: clearPressProps} = usePress({
     isDisabled: !!originalProps?.isDisabled,
     onPress: handleClear,
+    onPressStart: syncRefValueToInputValue,
   });
 
   const isInvalid = validationState === "invalid" || originalProps.isInvalid || isAriaInvalid;