diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index f2c917db..ada1bb5a 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -1,5 +1,5 @@ import clsx from "clsx"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; import { useCallbackRefState } from "../hooks/useCallbackRefState"; import { t } from "../i18n"; import { useIsMobile } from "../components/App"; @@ -20,6 +20,8 @@ export const Dialog = (props: { theme?: AppState["theme"]; }) => { const [islandNode, setIslandNode] = useCallbackRefState(); + const [lastActiveElement] = useState(document.activeElement); + useEffect(() => { if (!islandNode) { return; @@ -66,12 +68,17 @@ export const Dialog = (props: { return focusableElements ? Array.from(focusableElements) : []; }; + const onClose = () => { + (lastActiveElement as HTMLElement).focus(); + props.onCloseRequest(); + }; + return ( @@ -79,7 +86,7 @@ export const Dialog = (props: { {props.title}