Use Dialog TransitionProps.onExited to handle focus after dialog closes

Co-authored-by: imnasnainaec <[email protected]>

Author: Copilot

src/components/Buttons/NoteButton.tsx

@@ -19,13 +19,6 @@ interface NoteButtonProps {
 export default function NoteButton(props: NoteButtonProps): ReactElement {
   const [noteOpen, setNoteOpen] = useState<boolean>(false);
 
-  const handleClose = (): void => {
-    setNoteOpen(false);
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-
   return (
     <>
       <IconButtonWithTooltip
@@ -53,7 +46,8 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
         open={noteOpen}
         text={props.noteText}
         titleId={"addWords.addNote"}
-        close={handleClose}
+        close={() => setNoteOpen(false)}
+        onExited={props.onClick}
         updateText={props.updateNote ?? (() => {})}
         buttonIdCancel="note-edit-cancel"
         buttonIdClear="note-edit-clear"

src/components/Dialogs/EditTextDialog.tsx

@@ -24,6 +24,7 @@ interface EditTextDialogProps {
   text: string;
   titleId: string;
   close: () => void;
+  onExited?: () => void;
   updateText: (newText: string) => void | Promise<void>;
   buttonIdCancel?: string;
   buttonIdClear?: string;
@@ -90,6 +91,7 @@ export default function EditTextDialog(
     <Dialog
       open={props.open}
       onClose={escapeClose}
+      TransitionProps={{ onExited: props.onExited }}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
     >