fix: I should be able to use "enter" key to create profile (#4978)
## Context Fixes #4808 TL;DR Introducing pure stateless modal component ("UI modal") for our auth modal not to have default hotkeyScope overriding our create-profile hotkeyScope + we dont want the shortcut to be available for all the modal content, only for the input that should not be using a hotkeyscope, so we are using onKeyDown for the specific issue on create profile. Explanation create-profile hotkey scope is set by PageChangeEffect; CreateProfile component adds enter key shortcut; but this scope is overwritten by the default scope by the Modal component that expects a hotkeyScope to reset to (and defaults to the default hotkeyScope if none indicated). In the auth flow we were using that Modal component to give a modal look to the flow but it is not a modal per say, it's a set of pages contained within a modal look. By creating this UI component we are escaping that hotkeyScope overriding that does not make sense in our context. ## How was it tested Locally Storybook
This commit is contained in:
@ -164,9 +164,9 @@ export const SignInUpForm = () => {
|
||||
}
|
||||
}}
|
||||
error={showErrors ? error?.message : undefined}
|
||||
onKeyDown={handleKeyDown}
|
||||
fullWidth
|
||||
disableHotkeys
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</StyledInputContainer>
|
||||
)}
|
||||
@ -198,10 +198,10 @@ export const SignInUpForm = () => {
|
||||
placeholder="Password"
|
||||
onBlur={onBlur}
|
||||
onChange={onChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
error={showErrors ? error?.message : undefined}
|
||||
fullWidth
|
||||
disableHotkeys
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</StyledInputContainer>
|
||||
)}
|
||||
|
||||
@ -5,9 +5,7 @@ import { useParams } from 'react-router-dom';
|
||||
import { useNavigateAfterSignInUp } from '@/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts';
|
||||
import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
|
||||
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
|
||||
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
||||
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
|
||||
|
||||
import { useAuth } from '../../hooks/useAuth';
|
||||
@ -118,31 +116,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
|
||||
],
|
||||
);
|
||||
|
||||
useScopedHotkeys(
|
||||
'enter',
|
||||
() => {
|
||||
if (signInUpStep === SignInUpStep.Init) {
|
||||
continueWithEmail();
|
||||
}
|
||||
|
||||
if (signInUpStep === SignInUpStep.Email) {
|
||||
continueWithCredentials();
|
||||
}
|
||||
|
||||
if (signInUpStep === SignInUpStep.Password) {
|
||||
form.handleSubmit(submitCredentials)();
|
||||
}
|
||||
},
|
||||
PageHotkeyScope.SignInUp,
|
||||
[
|
||||
continueWithEmail,
|
||||
signInUpStep,
|
||||
continueWithCredentials,
|
||||
form,
|
||||
submitCredentials,
|
||||
],
|
||||
);
|
||||
|
||||
return {
|
||||
isInviteMode,
|
||||
signInUpStep,
|
||||
|
||||
Reference in New Issue
Block a user