From 89205ba4faf2b2185c8584aaa9e7e3b0e80d3964 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 16 Jan 2025 21:38:00 -0300
Subject: [PATCH] Revert "fix(input): use onPress for wrapper click focus
 (#4483)"

This reverts commit 992220a5a3d2a4e1639653b2fc0a9e8b4d9428f4.
---
 .../components/input/__tests__/input.test.tsx | 27 -------------------
 packages/components/input/src/use-input.ts    | 23 ++++++++--------
 2 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
index b73a1744ab..0f5fd3c4d3 100644
--- 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
index f7a7b42aa3..dd14ad7834 100644
--- 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),
         }),