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

Revert "fix(input): use onPress for wrapper click focus (#4483)" (#4576)

Browse Source 
This reverts commit 992220a5a3d2a4e1639653b2fc0a9e8b4d9428f4.
This commit is contained in:
Junior Garcia 2025-01-16 21:38:17 -03:00 committed by GitHub
parent 3979ddedcc
commit c80340441e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -224,33 +224,6 @@ describe("Input", () => {
expect(onClear).toHaveBeenCalledTimes(0);
});
it("should focus input on click", async () => {
const {getByTestId} = render(<Input data-testid="input" />);
const input = getByTestId("input") as HTMLInputElement;
const innerWrapper = document.querySelector("[data-slot='inner-wrapper']") as HTMLDivElement;
const inputWrapper = document.querySelector("[data-slot='input-wrapper']") as HTMLDivElement;
const user = userEvent.setup();
expect(document.activeElement).not.toBe(input);
await user.click(input);
expect(document.activeElement).toBe(input);
input.blur();
expect(document.activeElement).not.toBe(input);
await user.click(innerWrapper);
expect(document.activeElement).toBe(input);
input.blur();
expect(document.activeElement).not.toBe(input);
await user.click(inputWrapper);
expect(document.activeElement).toBe(input);
input.blur();
expect(document.activeElement).not.toBe(input);
});
});
describe("Input with React Hook Form", () => {

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

@ -156,12 +156,6 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
domRef.current?.focus();
}, [setInputValue, onClear]);
const handleInputWrapperClick = useCallback(() => {
if (domRef.current) {
domRef.current?.focus();
}
}, [domRef.current]);
// 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`
@ -226,11 +220,6 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
onPress: handleClear,
});
const {pressProps: inputWrapperPressProps} = usePress({
isDisabled: !!originalProps?.isDisabled || !!originalProps?.isReadOnly,
onPress: handleInputWrapperClick,
});
const isInvalid = validationState === "invalid" || isAriaInvalid;
const labelPlacement = useMemo<InputVariantProps["labelPlacement"]>(() => {
@ -409,7 +398,12 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
className: slots.inputWrapper({
class: clsx(classNames?.inputWrapper, isFilled ? "is-filled" : ""),
}),
...mergeProps(props, hoverProps, inputWrapperPressProps),
...mergeProps(props, hoverProps),
onClick: (e) => {
if (domRef.current && e.currentTarget === e.target) {
domRef.current.focus();
}
},
style: {
cursor: "text",
...props.style,
@ -433,6 +427,11 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
...props,
ref: innerWrapperRef,
"data-slot": "inner-wrapper",
onClick: (e) => {
if (domRef.current && e.currentTarget === e.target) {
domRef.current.focus();
}
},
className: slots.innerWrapper({
class: clsx(classNames?.innerWrapper, props?.className),
}),