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

This reverts commit 992220a.
heroui-inc · Jan 17, 2025 · c803404 · c803404
1 parent 3979dde
commit c803404
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 39 deletions.
diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
@@ -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", () => {

diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -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),
         }),