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:
Marie
2024-04-17 10:45:02 +02:00
committed by GitHub
parent 5ecc4ad378
commit 17422b7690
7 changed files with 244 additions and 202 deletions

View File

@ -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>
)}