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,69 +134,67 @@ 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">
-          <div className="px-3 mb-1">
+          <InputWithIcon
-            <InputWithIcon
+            className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
-              className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
+            icon="email"
-              icon="email"
+            inputType="email"
-              inputType="email"
+            placeholder="Email"
-              placeholder="Email"
+            value={email}
-              value={email}
+            onChange={handleEmailChange}
-              onChange={handleEmailChange}
+            onFocus={resetInvalid}
-              onFocus={resetInvalid}
+            onKeyDown={handleKeyDown}
-              onKeyDown={handleKeyDown}
+            disabled={isSigningIn}
-              disabled={isSigningIn}
+            ref={emailInputRef}
-              ref={emailInputRef}
+          />
-            />
+          <InputWithIcon
-            <InputWithIcon
+            className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
-              className={`mb-2 ${isInvalid ? 'border-dark-red' : null}`}
+            icon="password"
-              icon="password"
+            inputType={showPassword ? 'text' : 'password'}
-              inputType={showPassword ? 'text' : 'password'}
+            placeholder="Password"
-              placeholder="Password"
+            value={password}
-              value={password}
+            onChange={handlePasswordChange}
-              onChange={handlePasswordChange}
+            onFocus={resetInvalid}
-              onFocus={resetInvalid}
+            onKeyDown={handleKeyDown}
-              onKeyDown={handleKeyDown}
+            disabled={isSigningIn}
-              disabled={isSigningIn}
+            toggle={{
-              toggle={{
+              toggleOnIcon: 'eye-off',
-                toggleOnIcon: 'eye-off',
+              toggleOffIcon: 'eye',
-                toggleOffIcon: 'eye',
+              title: 'Show password',
-                title: 'Show password',
+              toggled: showPassword,
-                toggled: showPassword,
+              onClick: setShowPassword,
-                onClick: setShowPassword,
+            }}
-              }}
+            ref={passwordInputRef}
-              ref={passwordInputRef}
+          />
-            />
+          {isInvalid ? (
-            {isInvalid ? (
+            <div className="color-dark-red my-2">
-              <div className="color-dark-red my-2">
+              Invalid email or password.
-                Invalid email or password.
+            </div>
-              </div>
+          ) : null}
-            ) : null}
+          <Button
-            <Button
+            className="btn-w-full mt-1 mb-3"
-              className="btn-w-full mt-1 mb-3"
+            label={isSigningIn ? 'Signing in...' : 'Sign in'}
-              label={isSigningIn ? 'Signing in...' : 'Sign in'}
+            type="primary"
-              type="primary"
+            onClick={handleSignInFormSubmit}
-              onClick={handleSignInFormSubmit}
+            disabled={isSigningIn}
-              disabled={isSigningIn}
+          />
-            />
+          <Checkbox
+            name="is-ephemeral"
+            label="Stay signed in"
+            checked={!isEphemeral}
+            disabled={isSigningIn}
+            onChange={handleEphemeralChange}
+          />
+          {notesAndTagsCount > 0 ? (
             <Checkbox
-              name="is-ephemeral"
+              name="should-merge-local"
-              label="Stay signed in"
+              label={`Merge local data (${notesAndTagsCount} notes and tags)`}
-              checked={!isEphemeral}
+              checked={shouldMergeLocal}
               disabled={isSigningIn}
-              onChange={handleEphemeralChange}
+              onChange={handleShouldMergeChange}
             />
-            {notesAndTagsCount > 0 ? (
+          ) : null}
-              <Checkbox
+        </div>
-                name="should-merge-local"
-                label={`Merge local data (${notesAndTagsCount} notes and tags)`}
-                checked={shouldMergeLocal}
-                disabled={isSigningIn}
-                onChange={handleShouldMergeChange}
-              />
-            ) : null}
-          </div>
-        </form>
         <div className="h-1px my-2 bg-border"></div>
         <AdvancedOptions
           appState={appState}