fix(login): Don't show password error on email input (#16727)

PostHog · Jul 24, 2023 · 66b82f2 · 66b82f2
1 parent d1899c6
commit 66b82f2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx b/frontend/src/lib/lemon-ui/LemonInput/LemonInput.tsx
@@ -41,6 +41,7 @@ interface LemonInputPropsBase
     transparentBackground?: boolean
     /** Size of the element. Default: `'medium'`. */
     size?: 'small' | 'medium'
+    onPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void
     'data-attr'?: string
     'aria-label'?: string
 }
@@ -50,7 +51,6 @@ export interface LemonInputPropsText extends LemonInputPropsBase {
     value?: string
     defaultValue?: string
     onChange?: (newValue: string) => void
-    onPressEnter?: (newValue: string) => void
 }
 
 export interface LemonInputPropsNumber
@@ -60,7 +60,6 @@ export interface LemonInputPropsNumber
     value?: number
     defaultValue?: number
     onChange?: (newValue: number | undefined) => void
-    onPressEnter?: (newValue: number | undefined) => void
 }
 
 export type LemonInputProps = LemonInputPropsText | LemonInputPropsNumber
@@ -152,15 +151,6 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
                 className
             )}
             aria-disabled={textProps.disabled}
-            onKeyDown={(event) => {
-                if (onPressEnter && event.key === 'Enter') {
-                    if (type === 'number') {
-                        onPressEnter(value ?? 0)
-                    } else {
-                        onPressEnter(value?.toString() ?? '')
-                    }
-                }
-            }}
             onClick={() => focus()}
         >
             {prefix}
@@ -186,6 +176,11 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
                     setFocused(false)
                     onBlur?.(event)
                 }}
+                onKeyDown={(event) => {
+                    if (onPressEnter && event.key === 'Enter') {
+                        onPressEnter(event)
+                    }
+                }}
                 {...textProps}
             />
             {suffix}

diff --git a/frontend/src/scenes/authentication/Login.tsx b/frontend/src/scenes/authentication/Login.tsx
@@ -92,9 +92,13 @@ export function Login(): JSX.Element {
                 <h2>Log in</h2>
                 {generalError && (
                     <LemonBanner type="error">
-                        {generalError.detail ||
-                            ERROR_MESSAGES[generalError.code] ||
-                            'Could not complete your login. Please try again.'}
+                        {generalError.detail || ERROR_MESSAGES[generalError.code] || (
+                            <>
+                                Could not complete your login.
+                                <br />
+                                Please try again.
+                            </>
+                        )}
                     </LemonBanner>
                 )}
                 <Form logic={loginLogic} formKey="login" enableFormOnSubmit className="space-y-4">
@@ -107,8 +111,12 @@ export function Login(): JSX.Element {
                             placeholder="[email protected]"
                             type="email"
                             onBlur={() => precheck({ email: login.email })}
-                            onPressEnter={() => {
+                            onPressEnter={(e) => {
                                 precheck({ email: login.email })
+                                if (isPasswordHidden) {
+                                    e.preventDefault() // Don't trigger submission if password field is still hidden
+                                    passwordInputRef.current?.focus()
+                                }
                             }}
                         />
                     </Field>