diff --git a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx index 9c1fe96134..6f615e3e91 100644 --- a/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx +++ b/webapp/packages/core-dialogs/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx @@ -7,7 +7,7 @@ */ import { observer } from 'mobx-react-lite'; -import { useContext, useEffect } from 'react'; +import { useContext, useEffect, useRef } from 'react'; import { Dialog, useDialogState } from 'reakit/Dialog'; import styled, { use } from 'reshadow'; @@ -58,6 +58,7 @@ export const CommonDialogWrapper = observer(function C const context = useContext(DialogContext); const translate = useTranslate(); const dialogState = useDialogState({ visible: true }); + const focusedElementRef = useRef(null); useEffect(() => { if (!dialogState.visible && !context.dialog.options?.persistent) { @@ -65,6 +66,16 @@ export const CommonDialogWrapper = observer(function C } }); + useEffect(() => { + if (document.activeElement instanceof HTMLElement) { + focusedElementRef.current = document.activeElement; + } + + return () => { + focusedElementRef.current?.focus(); + }; + }, []); + return styled(useStyles(commonDialogThemeStyle, commonDialogBaseStyle, dialogStyles, style))(