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();
-
- 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 {
- 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(() => {
@@ -409,7 +398,12 @@ export function useInput {
+ if (domRef.current && e.currentTarget === e.target) {
+ domRef.current.focus();
+ }
+ },
style: {
cursor: "text",
...props.style,
@@ -433,6 +427,11 @@ export function useInput {
+ if (domRef.current && e.currentTarget === e.target) {
+ domRef.current.focus();
+ }
+ },
className: slots.innerWrapper({
class: clsx(classNames?.innerWrapper, props?.className),
}),