Fix clear button in input field

cartridge-gg · May 31, 2024 · 8a8ff10 · 8a8ff10
1 parent 34410e6
commit 8a8ff10
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git 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
@@ -21,7 +21,6 @@ import { client } from "utils/graphql";
 import { PopupCenter } from "utils/url";
 import { FormValues, SignupProps } from "./types";
 import { isIframe, validateUsernameFor } from "./utils";
-import { useClearField } from "./hooks";
 import { RegistrationLink } from "./RegistrationLink";
 import { doSignup } from "hooks/account";
 import { useControllerTheme } from "hooks/theme";
@@ -36,7 +35,7 @@ export function Signup({
 }: SignupProps) {
   const [isRegistering, setIsRegistering] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(new Error("errorrrrrrrrrrr"));
+  const [error, setError] = useState();
 
   const onSubmit = useCallback(async (values: FormValues) => {
     setIsLoading(true);
@@ -171,8 +170,6 @@ function Form({
     },
   );
 
-  const onClearUsername = useClearField("username");
-
   const onLogin = useCallback(() => {
     onLoginProp(values.username);
   }, [values.username, onLoginProp]);
@@ -194,14 +191,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
@@ -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>
           )
         )}