Bug Fix: Allows user to press 'Enter' to navigate through forms (#2840)

* Adding TextInput onKeyDown prop for detecting enter key on signup/login/onbaording forms

* Adding onKeyDown for password field

front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -61,6 +61,21 @@ export const SignInUpForm = () => {
     workspace,
   } = useSignInUp();
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+
+      if (signInUpStep === SignInUpStep.Init) {
+        continueWithEmail();
+      } else if (signInUpStep === SignInUpStep.Email) {
+        continueWithCredentials();
+      } else if (signInUpStep === SignInUpStep.Password) {
+        setShowErrors(true);
+        handleSubmit(submitCredentials)();
+      }
+    }
+  };
+
   const buttonTitle = useMemo(() => {
     if (signInUpStep === SignInUpStep.Init) {
       return 'Continue With Email';
@@ -139,6 +154,7 @@ export const SignInUpForm = () => {
                         }
                       }}
                       error={showErrors ? error?.message : undefined}
+                      onKeyDown={handleKeyDown}
                       fullWidth
                       disableHotkeys
                     />
@@ -172,6 +188,7 @@ export const SignInUpForm = () => {
                       placeholder="Password"
                       onBlur={onBlur}
                       onChange={onChange}
+                      onKeyDown={handleKeyDown}
                       error={showErrors ? error?.message : undefined}
                       fullWidth
                       disableHotkeys

front/src/modules/ui/input/components/TextInput.tsx

@@ -22,7 +22,7 @@ import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
 export type TextInputComponentProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
-  'onChange'
+  'onChange' | 'onKeyDown'
 > & {
   className?: string;
   label?: string;
@@ -31,6 +31,7 @@ export type TextInputComponentProps = Omit<
   disableHotkeys?: boolean;
   error?: string;
   RightIcon?: IconComponent;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 };
 
 const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
@@ -118,6 +119,7 @@ const TextInputComponent = (
     onChange,
     onFocus,
     onBlur,
+    onKeyDown,
     fullWidth,
     error,
     required,
@@ -184,6 +186,7 @@ const TextInputComponent = (
           onChange={(event: ChangeEvent<HTMLInputElement>) => {
             onChange?.(event.target.value);
           }}
+          onKeyDown={onKeyDown}
           {...{ autoFocus, disabled, placeholder, required, value }}
         />
         <StyledTrailingIconContainer>

front/src/pages/auth/CreateWorkspace.tsx

@@ -97,6 +97,13 @@ export const CreateWorkspace = () => {
     [enqueueSnackBar, navigate, setCurrentWorkspace, updateWorkspace],
   );
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      handleSubmit(onSubmit)();
+    }
+  };
+
   useScopedHotkeys(
     'enter',
     () => {
@@ -141,6 +148,7 @@ export const CreateWorkspace = () => {
                 onBlur={onBlur}
                 onChange={onChange}
                 error={error?.message}
+                onKeyDown={handleKeyDown}
                 fullWidth
                 disableHotkeys
               />