diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx index 3029ca0c..12d98a7f 100644 --- a/src/components/Modal/Modal.jsx +++ b/src/components/Modal/Modal.jsx @@ -60,7 +60,7 @@ export const Modal = ({ dialogRef.current.showModal(); }, []); - useModalFocus(allowPrimaryActionOnEnterKey, autoFocus, dialogRef, primaryButtonRef); + useModalFocus(autoFocus, dialogRef, primaryButtonRef); useModalScrollPrevention(preventScrollUnderneath); const onCancel = useCallback( @@ -76,8 +76,19 @@ export const Modal = ({ [closeButtonRef], ); const onKeyDown = useCallback( - (e) => dialogOnKeyDownHandler(e, closeButtonRef, allowCloseOnEscapeKey), - [allowCloseOnEscapeKey, closeButtonRef], + (e) => dialogOnKeyDownHandler( + e, + closeButtonRef, + primaryButtonRef, + allowCloseOnEscapeKey, + allowPrimaryActionOnEnterKey, + ), + [ + allowCloseOnEscapeKey, + allowPrimaryActionOnEnterKey, + closeButtonRef, + primaryButtonRef, + ], ); const events = { onCancel, diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md index 1c810b42..125dd067 100644 --- a/src/components/Modal/README.md +++ b/src/components/Modal/README.md @@ -92,11 +92,19 @@ See [API](#api) for all available options. - **Modal actions** should correspond to the modal purpose, too. E.g. “Delete” tells better what happens rather than “OK”. -- Modal **automatically focuses the first non-disabled form field** by default - which allows users to confirm the modal by hitting the enter key. When no - field is found then the primary button (in the footer) is focused. To turn +- Modal **automatically focuses the first non-disabled form field** by default. + When no field is found then the primary button (in the footer) is focused. To turn this feature off, set the `autofocus` prop to `false`. +- Modal **submits the form when the user presses the `Enter` key** . The primary + button is clicked in this case. To turn this feature off, set the + `allowPrimaryActionOnEnterKey` prop to `false`. + +- Modal **closes when the user presses the `Escape` key**. The close button is + clicked in this case. To turn this feature off, set the `allowCloseOnEscapeKey` + prop to `false`. Modal can be also **closed by clicking on the backdrop**. To + turn this feature off, set the `allowCloseOnBackdropClick` prop to `false`. + - **Avoid stacking** of modals. While it may technically work, the modal is just not designed for that. @@ -225,9 +233,33 @@ React.createElement(() => { - - + + + + + + + +