fix: focus on last active element when dialog closes (#3447)

* fix: focus on last active element when dialog closes

* useState instead of ref
This commit is contained in:
Aakansha Doshi 2021-04-15 20:29:00 +05:30 committed by GitHub
parent 793b69e592
commit c0047269c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 15 additions and 14 deletions

View file

@ -2,6 +2,7 @@ import React, { useState } from "react";
import { t } from "../i18n";
import { Dialog } from "./Dialog";
import { useExcalidrawContainer } from "./App";
export const ErrorDialog = ({
message,
@ -11,6 +12,7 @@ export const ErrorDialog = ({
onClose?: () => void;
}) => {
const [modalIsShown, setModalIsShown] = useState(!!message);
const excalidrawContainer = useExcalidrawContainer();
const handleClose = React.useCallback(() => {
setModalIsShown(false);
@ -18,8 +20,9 @@ export const ErrorDialog = ({
if (onClose) {
onClose();
}
document.querySelector<HTMLElement>(".excalidraw-container")?.focus();
}, [onClose]);
// TODO: Fix the A11y issues so this is never needed since we should always focus on last active element
excalidrawContainer?.focus();
}, [onClose, excalidrawContainer]);
return (
<>