chore(input): rollback PR3533 (#3720)

nextui-org · Sep 6, 2024 · 485b865 · 485b865
1 parent 123b7fb
commit 485b865
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 60 deletions.
diff --git a/.changeset/long-ducks-do.md b/.changeset/long-ducks-do.md
diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
@@ -126,26 +126,6 @@ describe("Input", () => {
     expect(ref.current?.value)?.toBe(value);
   });
 
-  it("setting ref should sync the internal value", () => {
-    const ref = React.createRef<HTMLInputElement>();
-
-    const {container} = render(<Input ref={ref} type="text" />);
-
-    if (!ref.current) {
-      throw new Error("ref is null");
-    }
-
-    ref.current!.value = "value";
-
-    const input = container.querySelector("input")!;
-
-    input.focus();
-
-    const internalValue = input.value;
-
-    expect(ref.current?.value)?.toBe(internalValue);
-  });
-
   it("should clear the value and onClear is triggered", async () => {
     const onClear = jest.fn();
 

diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -15,7 +15,7 @@ import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {useFocusWithin, useHover, usePress} from "@react-aria/interactions";
 import {clsx, dataAttr, isEmpty, objectToDeps, safeAriaLabel, warn} from "@nextui-org/shared-utils";
 import {useControlledState} from "@react-stately/utils";
-import {useMemo, Ref, useCallback, useState, useImperativeHandle, useRef} from "react";
+import {useMemo, Ref, useCallback, useState} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
 import {useTextField} from "@react-aria/textfield";
 
@@ -131,40 +131,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const disableAnimation =
     originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;
 
-  const domRef = useRef<T>(null);
-
-  let proxy: T | undefined = undefined;
-
-  useImperativeHandle(
-    ref,
-    () => {
-      if (proxy === undefined) {
-        proxy = new Proxy(domRef.current!, {
-          get(target, prop) {
-            const value = target[prop];
-
-            if (value instanceof Function) {
-              return value.bind(target);
-            }
-
-            return value;
-          },
-          set(target, prop, value) {
-            target[prop] = value;
-
-            if (prop === "value") {
-              setInputValue(value);
-            }
-
-            return true;
-          },
-        });
-      }
-
-      return proxy;
-    },
-    [domRef.current],
-  );
+  const domRef = useDOMRef<T>(ref);
 
   const baseDomRef = useDOMRef<HTMLDivElement>(baseRef);
   const inputWrapperRef = useDOMRef<HTMLDivElement>(wrapperRef);