From 9f74cb32ea46eda3fe4b1708b376ae151c3887f4 Mon Sep 17 00:00:00 2001
From: Peng Xiao <pengxiao@outlook.com>
Date: Tue, 12 Mar 2024 15:07:48 +0000
Subject: [PATCH] fix(component): input focus implementation (#6086)

---
 .../frontend/component/src/ui/input/input.tsx | 22 +------------------
 .../component/src/ui/input/style.css.ts       |  3 ++-
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/component/src/ui/input/input.tsx b/packages/frontend/component/src/ui/input/input.tsx
index 2bc95b491..bb8ec5b0e 100644
--- a/packages/frontend/component/src/ui/input/input.tsx
+++ b/packages/frontend/component/src/ui/input/input.tsx
@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import type {
   ChangeEvent,
   CSSProperties,
-  FocusEvent,
   FocusEventHandler,
   ForwardedRef,
   InputHTMLAttributes,
@@ -10,7 +9,7 @@ import type {
   KeyboardEventHandler,
   ReactNode,
 } from 'react';
-import { forwardRef, useCallback, useState } from 'react';
+import { forwardRef, useCallback } from 'react';
 
 import { input, inputWrapper } from './style.css';
 
@@ -39,8 +38,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     style = {},
     inputStyle = {},
     size = 'default',
-    onFocus,
-    onBlur,
     preFix,
     endFix,
     onEnter,
@@ -50,8 +47,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   }: InputProps,
   ref: ForwardedRef<HTMLInputElement>
 ) {
-  const [isFocus, setIsFocus] = useState(false);
-
   const handleAutoFocus = useCallback((ref: HTMLInputElement | null) => {
     if (ref) {
       window.setTimeout(() => ref.focus(), 0);
@@ -64,7 +59,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         // status
         disabled: disabled,
         'no-border': noBorder,
-        focus: isFocus,
         // color
         error: status === 'error',
         success: status === 'success',
@@ -87,20 +81,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         ref={autoFocus ? handleAutoFocus : ref}
         disabled={disabled}
         style={inputStyle}
-        onFocus={useCallback(
-          (e: FocusEvent<HTMLInputElement>) => {
-            setIsFocus(true);
-            onFocus?.(e);
-          },
-          [onFocus]
-        )}
-        onBlur={useCallback(
-          (e: FocusEvent<HTMLInputElement>) => {
-            setIsFocus(false);
-            onBlur?.(e);
-          },
-          [onBlur]
-        )}
         onChange={useCallback(
           (e: ChangeEvent<HTMLInputElement>) => {
             propsOnChange?.(e.target.value);
diff --git a/packages/frontend/component/src/ui/input/style.css.ts b/packages/frontend/component/src/ui/input/style.css.ts
index 254e993ef..f0e6dc37d 100644
--- a/packages/frontend/component/src/ui/input/style.css.ts
+++ b/packages/frontend/component/src/ui/input/style.css.ts
@@ -42,8 +42,9 @@ export const inputWrapper = style({
     '&.default': {
       borderColor: cssVar('borderColor'),
     },
-    '&.default.focus': {
+    '&.default:is(:focus-within, :focus, :focus-visible)': {
       borderColor: cssVar('primaryColor'),
+      outline: 'none',
       boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
     },
   },