[NewEntry] Return focus to gloss after note interaction (#4037)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Danny Rorabaugh <imnasnainaec@gmail.com>

Author: Copilot

src/components/Buttons/NoteButton.tsx

@@ -11,13 +11,26 @@ interface NoteButtonProps {
   /** If `noteText` is empty and `updateNote` defined,
    * the button will have default add-note hover text. */
   noteText: string;
+  onExited?: () => void;
   updateNote?: (newText: string) => void | Promise<void>;
 }
 
 /** A note adding/editing/viewing button */
 export default function NoteButton(props: NoteButtonProps): ReactElement {
   const [noteOpen, setNoteOpen] = useState<boolean>(false);
 
+  const handleOpen = (): void => {
+    setNoteOpen(true);
+
+    if (props.onExited) {
+      // Allow custom focus handling after dialog closes
+      if (document.activeElement instanceof HTMLElement) {
+        // Blur the button to prevent it from receiving focus when dialog closes
+        document.activeElement.blur();
+      }
+    }
+  };
+
   return (
     <>
       <IconButtonWithTooltip
@@ -35,7 +48,7 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
             />
           )
         }
-        onClick={props.updateNote ? () => setNoteOpen(true) : undefined}
+        onClick={props.updateNote ? handleOpen : undefined}
         side="top"
         size="small"
         text={props.noteText || undefined}
@@ -46,6 +59,7 @@ export default function NoteButton(props: NoteButtonProps): ReactElement {
         text={props.noteText}
         titleId={"addWords.addNote"}
         close={() => setNoteOpen(false)}
+        onExited={props.onExited}
         updateText={props.updateNote ?? (() => {})}
         buttonIdCancel="note-edit-cancel"
         buttonIdClear="note-edit-clear"

src/components/DataEntry/DataEntryTable/NewEntry/index.tsx

@@ -277,6 +277,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           <NoteButton
             buttonId={NewEntryId.ButtonNote}
             noteText={submitting ? "" : newNote}
+            onExited={() => focus(FocusTarget.Gloss)}
             updateNote={setNewNote}
           />
         )}

src/components/DataEntry/DataEntryTable/NewEntry/tests/index.test.tsx

@@ -1,4 +1,11 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { createRef } from "react";
 import { Provider } from "react-redux";
@@ -11,13 +18,14 @@ import { newWritingSystem } from "types/writingSystem";
 
 jest.mock("components/DataEntry/utilities.ts", () => ({
   ...jest.requireActual("components/DataEntry/utilities.ts"),
-  focusInput: jest.fn(),
+  focusInput: () => mockFocusInput(),
 }));
 jest.mock("components/Pronunciations/PronunciationsFrontend", () => jest.fn());
 
 const mockAddNewAudio = jest.fn();
 const mockAddNewEntry = jest.fn();
 const mockDelNewAudio = jest.fn();
+const mockFocusInput = jest.fn();
 const mockSetNewGloss = jest.fn();
 const mockSetNewNote = jest.fn();
 const mockSetNewVern = jest.fn();
@@ -79,7 +87,7 @@ const fireEnterOnActiveElement = async (): Promise<void> => {
 };
 
 beforeEach(() => {
-  jest.resetAllMocks();
+  jest.clearAllMocks();
 });
 
 afterEach(() => {
@@ -173,4 +181,31 @@ describe("NewEntry", () => {
     expect(mockAddNewEntry).toHaveBeenCalledTimes(1);
     expect(mockResetNewEntry).toHaveBeenCalledTimes(1);
   });
+
+  it("returns focus to gloss after closing note dialog", async () => {
+    await renderNewEntry();
+    mockFocusInput.mockClear();
+
+    // Click the note button to open the dialog
+    await userEvent.click(screen.getByTestId(NewEntryId.ButtonNote));
+    expect(mockFocusInput).not.toHaveBeenCalled();
+
+    // Cancel and verify that focusInput was called after transition completes
+    await userEvent.click(screen.getByText(new RegExp("cancel")));
+    await waitFor(() => expect(mockFocusInput).toHaveBeenCalled());
+  });
+
+  it("returns focus to gloss after confirming note", async () => {
+    await renderNewEntry();
+    mockFocusInput.mockClear();
+
+    // Click the note button to open the dialog and type a note
+    await userEvent.click(screen.getByTestId(NewEntryId.ButtonNote));
+    await userEvent.type(document.activeElement!, "note text");
+    expect(mockFocusInput).not.toHaveBeenCalled();
+
+    // Confirm and verify that focusInput was called after transition completes
+    await userEvent.click(screen.getByText(new RegExp("confirm")));
+    await waitFor(() => expect(mockFocusInput).toHaveBeenCalled());
+  });
 });

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}
+      slotProps={{ transition: { onExited: props.onExited } }}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
     >