diff --git a/packages/peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap b/packages/peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap index e681fb0e59..47c2adbc08 100644 --- a/packages/peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap +++ b/packages/peregrine/lib/talons/CreateAccount/__tests__/__snapshots__/useCreateAccount.spec.js.snap @@ -26,6 +26,7 @@ Object { "signInMutation" => null, }, "handleCancel": [Function], + "handleCancelKeyPress": [Function], "handleSubmit": [Function], "initialValues": Object { "customer": Object { diff --git a/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js b/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js index c4bbfe946b..cc8953998a 100644 --- a/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js +++ b/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js @@ -85,6 +85,14 @@ export const useCreateAccount = props => { onCancel(); }, [onCancel]); + const handleCancelKeyPress = useCallback(() => { + event => { + if (event.key === 'Enter') { + handleCancel(); + } + }; + }, [handleCancel]); + const handleSubmit = useCallback( async formValues => { setIsSubmitting(true); @@ -167,6 +175,7 @@ export const useCreateAccount = props => { setIsSubmitting(false); } }, + [ cartId, generateReCaptchaData, @@ -209,6 +218,7 @@ export const useCreateAccount = props => { errors, handleCancel, handleSubmit, + handleCancelKeyPress, initialValues: sanitizedInitialValues, isDisabled: isSubmitting || isGettingDetails || recaptchaLoading, recaptchaWidgetProps diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.js b/packages/venia-ui/lib/components/CreateAccount/createAccount.js index 55927ffb1f..31fa9a17a1 100644 --- a/packages/venia-ui/lib/components/CreateAccount/createAccount.js +++ b/packages/venia-ui/lib/components/CreateAccount/createAccount.js @@ -32,6 +32,7 @@ const CreateAccount = props => { handleCancel, handleSubmit, handleEnterKeyPress, + handleCancelKeyPress, isDisabled, initialValues, recaptchaWidgetProps @@ -47,6 +48,7 @@ const CreateAccount = props => { type="button" priority="low" onClick={handleCancel} + onKeyDown={handleCancelKeyPress} >