gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

fix(react/dialogs): restore focus after modal is dismissed

Browse Source
This commit is contained in:
Elian Doran 2025-08-10 20:06:05 +03:00
parent fd1ea05c78
commit 2d3b99c959
No known key found for this signature in database
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/client/src/widgets/react/Modal.tsx
View File

@ -69,6 +69,7 @@ export default function Modal({ children, className, size, title, header, footer
const modalInstanceRef = useRef<BootstrapModal>(); const modalInstanceRef = useRef<BootstrapModal>();
const formRef = _formRef ?? useRef<HTMLFormElement>(null); const formRef = _formRef ?? useRef<HTMLFormElement>(null);
const parentWidget = useContext(ParentComponent); const parentWidget = useContext(ParentComponent);
const elementToFocus = useRef<Element | null>();
if (onShown || onHidden) { if (onShown || onHidden) {
useEffect(() => { useEffect(() => {
@ -79,16 +80,17 @@ export default function Modal({ children, className, size, title, header, footer
if (onShown) { if (onShown) {
modalElement.addEventListener("shown.bs.modal", onShown); modalElement.addEventListener("shown.bs.modal", onShown);
} }
if (onHidden) { modalElement.addEventListener("hidden.bs.modal", () => {
modalElement.addEventListener("hidden.bs.modal", onHidden); onHidden();
} if (elementToFocus.current && "focus" in elementToFocus.current) {
(elementToFocus.current as HTMLElement).focus();
}
});
return () => { return () => {
if (onShown) { if (onShown) {
modalElement.removeEventListener("shown.bs.modal", onShown); modalElement.removeEventListener("shown.bs.modal", onShown);
} }
if (onHidden) { modalElement.removeEventListener("hidden.bs.modal", onHidden);
modalElement.removeEventListener("hidden.bs.modal", onHidden);
}
}; };
}, [ ]); }, [ ]);
} }
@ -98,6 +100,7 @@ export default function Modal({ children, className, size, title, header, footer
return; return;
} }
if (show) { if (show) {
elementToFocus.current = document.activeElement;
openDialog(parentWidget.$widget, !stackable).then(($widget) => { openDialog(parentWidget.$widget, !stackable).then(($widget) => {
modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]); modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
}) })