ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-11-20 17:21:24 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

F: Return focus on dialog close

Browse Source
This commit is contained in:
Ivan 2025-11-20 13:18:26 +03:00
parent c9bc3401b0
commit f08ee8e00f
2 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
rsconcept/frontend/src/components/modal/modal-form.tsx
View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import { useEffect, useRef } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import { type HelpTopic } from '@/features/help'; import { type HelpTopic } from '@/features/help';
@ -74,6 +75,14 @@ export function ModalForm({
}: React.PropsWithChildren<ModalFormProps>) { }: React.PropsWithChildren<ModalFormProps>) {
const hideDialog = useDialogsStore(state => state.hideDialog); const hideDialog = useDialogsStore(state => state.hideDialog);
const previousFocusRef = useRef<HTMLElement | null>(null);
useEffect(() => {
previousFocusRef.current = document.activeElement as HTMLElement | null;
return () => {
previousFocusRef.current?.focus();
};
}, []);
function handleCancel() { function handleCancel() {
onCancel?.(); onCancel?.();
hideDialog(); hideDialog();

9
rsconcept/frontend/src/components/modal/modal-view.tsx
View File

@ -1,5 +1,6 @@
'use client'; 'use client';
import { useEffect, useRef } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import { BadgeHelp } from '@/features/help/components/badge-help'; import { BadgeHelp } from '@/features/help/components/badge-help';
@ -36,6 +37,14 @@ export function ModalView({
const hideDialog = useDialogsStore(state => state.hideDialog); const hideDialog = useDialogsStore(state => state.hideDialog);
useEscapeKey(hideDialog); useEscapeKey(hideDialog);
const previousFocusRef = useRef<HTMLElement | null>(null);
useEffect(() => {
previousFocusRef.current = document.activeElement as HTMLElement | null;
return () => {
previousFocusRef.current?.focus();
};
}, []);
return ( return (
<div className='cc-modal-wrapper'> <div className='cc-modal-wrapper'>
<ModalBackdrop onHide={hideDialog} /> <ModalBackdrop onHide={hideDialog} />