fix: Password toggle triggering on Enter when checkbox is focused (#767)

app/assets/javascripts/components/AccountMenu/SignIn.tsx

@@ -34,7 +34,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
 
     useEffect(() => {
       if (emailInputRef?.current) {
-        emailInputRef.current!.focus();
+        emailInputRef.current?.focus();
       }
     }, []);
 
@@ -73,8 +73,8 @@ export const SignInPane: FunctionComponent<Props> = observer(
 
     const signIn = () => {
       setIsSigningIn(true);
-      emailInputRef?.current!.blur();
+      emailInputRef?.current?.blur();
-      passwordInputRef?.current!.blur();
+      passwordInputRef?.current?.blur();
 
       application
         .signIn(email, password, isStrictSignin, isEphemeral, shouldMergeLocal)
@@ -92,7 +92,7 @@ export const SignInPane: FunctionComponent<Props> = observer(
             application.alertService.alert(err);
           }
           setPassword('');
-          passwordInputRef?.current!.blur();
+          passwordInputRef?.current?.blur();
         })
         .finally(() => {
           setIsSigningIn(false);
@@ -109,12 +109,12 @@ export const SignInPane: FunctionComponent<Props> = observer(
       e.preventDefault();
 
       if (!email || email.length === 0) {
-        emailInputRef?.current!.focus();
+        emailInputRef?.current?.focus();
         return;
       }
 
       if (!password || password.length === 0) {
-        passwordInputRef?.current!.focus();
+        passwordInputRef?.current?.focus();
         return;
       }
 
@@ -134,7 +134,6 @@ export const SignInPane: FunctionComponent<Props> = observer(
           />
           <div className="sn-account-menu-headline">Sign in</div>
         </div>
-        <form onSubmit={handleSignInFormSubmit}>
         <div className="px-3 mb-1">
           <InputWithIcon
             className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
@@ -196,7 +195,6 @@ export const SignInPane: FunctionComponent<Props> = observer(
             />
           ) : null}
         </div>
-        </form>
         <div className="h-1px my-2 bg-border"></div>
         <AdvancedOptions
           appState={appState}