archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

chore(input): rollback PR3533 (#3720)

Browse Source
This commit is contained in:
աӄա 2024-09-06 10:13:18 +08:00 committed by GitHub
parent 123b7fbc9f
commit 485b8653de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 2 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/long-ducks-do.md
View File

@ -1,5 +0,0 @@
---
"@nextui-org/input": patch
---
syncs changes to ref value to internal (state) value (#3024, #3436)

20
packages/components/input/__tests__/input.test.tsx
View File

@ -126,26 +126,6 @@ describe("Input", () => {
expect(ref.current?.value)?.toBe(value); 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 () => { it("should clear the value and onClear is triggered", async () => {
const onClear = jest.fn(); const onClear = jest.fn();

37
packages/components/input/src/use-input.ts
View File

@ -15,7 +15,7 @@ import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
import {useFocusWithin, useHover, usePress} from "@react-aria/interactions"; import {useFocusWithin, useHover, usePress} from "@react-aria/interactions";
import {clsx, dataAttr, isEmpty, objectToDeps, safeAriaLabel, warn} from "@nextui-org/shared-utils"; import {clsx, dataAttr, isEmpty, objectToDeps, safeAriaLabel, warn} from "@nextui-org/shared-utils";
import {useControlledState} from "@react-stately/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 {chain, mergeProps} from "@react-aria/utils";
import {useTextField} from "@react-aria/textfield"; import {useTextField} from "@react-aria/textfield";
@ -131,40 +131,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
const disableAnimation = const disableAnimation =
originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false; originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;
const domRef = useRef<T>(null); const domRef = useDOMRef<T>(ref);
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 baseDomRef = useDOMRef<HTMLDivElement>(baseRef); const baseDomRef = useDOMRef<HTMLDivElement>(baseRef);
const inputWrapperRef = useDOMRef<HTMLDivElement>(wrapperRef); const inputWrapperRef = useDOMRef<HTMLDivElement>(wrapperRef);