From 43c9ca10ad34c33216aaf8a7fc52ea7aa8efe832 Mon Sep 17 00:00:00 2001
From: JunichiSugiura <jun.sugiura.jp@gmail.com>
Date: Fri, 31 May 2024 15:05:11 +0200
Subject: [PATCH] Fix clear button in input field

---
 packages/keychain/src/components/Auth/Login.tsx  | 3 ++-
 packages/keychain/src/components/Auth/Signup.tsx | 6 ++----
 packages/ui/src/components/Field.tsx             | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/keychain/src/components/Auth/Login.tsx b/packages/keychain/src/components/Auth/Login.tsx
index caef20ce3..ccd9b4f40 100644
--- a/packages/keychain/src/components/Auth/Login.tsx
+++ b/packages/keychain/src/components/Auth/Login.tsx
@@ -109,7 +109,7 @@ export function Login({
                 placeholder="Username"
                 validate={validateUsernameFor("login")}
               >
-                {({ field, meta }) => (
+                {({ field, meta, form }) => (
                   <Field
                     {...field}
                     autoFocus
@@ -118,6 +118,7 @@ export function Login({
                     error={meta.error}
                     isLoading={props.isValidating}
                     isDisabled={isLoading}
+                    onClear={() => form.setFieldValue(field.name, "")}
                   />
                 )}
               </FormikField>
diff --git a/packages/keychain/src/components/Auth/Signup.tsx b/packages/keychain/src/components/Auth/Signup.tsx
index 9306a4dd1..1c73bf2ac 100644
--- a/packages/keychain/src/components/Auth/Signup.tsx
+++ b/packages/keychain/src/components/Auth/Signup.tsx
@@ -171,8 +171,6 @@ function Form({
     },
   );
 
-  const onClearUsername = useClearField("username");
-
   const onLogin = useCallback(() => {
     onLoginProp(values.username);
   }, [values.username, onLoginProp]);
@@ -194,14 +192,14 @@ function Form({
           placeholder="Username"
           validate={validateUsernameFor("signup")}
         >
-          {({ field, meta }) => (
+          {({ field, meta, form }) => (
             <Field
               {...field}
               autoFocus
               placeholder="Username"
               touched={meta.touched}
               error={meta.error}
-              onClear={onClearUsername}
+              onClear={() => form.setFieldValue(field.name, "")}
               isLoading={isValidating}
             />
           )}
diff --git a/packages/ui/src/components/Field.tsx b/packages/ui/src/components/Field.tsx
index cbddc94a7..61d998cf1 100644
--- a/packages/ui/src/components/Field.tsx
+++ b/packages/ui/src/components/Field.tsx
@@ -67,7 +67,7 @@ export function Field({
               cursor={isActive ? "pointer" : "default"}
               opacity={isActive ? 100 : 0} // workaround for onBlur handler triggeres before onClear
             >
-              <TimesCircleIcon color="text.secondary" boxSize={5} />
+              <TimesCircleIcon color="text.secondary" boxSize={6} />
             </InputRightElement>
           )
         )}