[NewEntry] Avoid focus while submission is underway (#4016)

Also, visually clear new entry while submitting

Author: imnasnainaec

src/backend/index.ts

@@ -152,7 +152,6 @@ export async function uploadAudio(
   wordId: string,
   file: FileWithSpeakerId
 ): Promise<string> {
-  console.info(file);
   const projectId = LocalStorage.getProjectId();
   const speakerId = file.speakerId ?? "";
   const params = { projectId, wordId, file };

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

@@ -121,8 +121,9 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
     resetNewEntry();
     setSubmitting(false);
     setVernOpen(false);
-    focus(FocusTarget.Vernacular);
-  }, [focus, resetNewEntry]);
+    // Do not use focus(FocusTarget.Vernacular) here.
+    // That allows typing atop the previous vernacular.
+  }, [resetNewEntry]);
 
   /** Reset when tree opens, except for the first time it is open. */
   useEffect(() => {
@@ -136,14 +137,15 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
     }
   }, [isTreeOpen, resetState, wasTreeClosed]);
 
-  /** When the vern dialog is closed, focus needs to return to text fields.
-   * The following sets a flag (shouldFocus) to be triggered by conditionalFocus(),
+  /** When the vern dialog is closed or submission completed,
+   * focus needs to return to text fields.
+   * This sets a flag (shouldFocus) to be triggered by conditionalFocus(),
    * which is passed to each input component to call on update. */
   useEffect(() => {
-    if (!vernOpen) {
+    if (!submitting && !vernOpen) {
       setShouldFocus(selectedDup ? FocusTarget.Gloss : FocusTarget.Vernacular);
     }
-  }, [selectedDup, vernOpen]);
+  }, [selectedDup, submitting, vernOpen]);
 
   /** This function is for a child input component to call on update
    * to move focus to itself, if shouldFocus says it should. */
@@ -159,42 +161,40 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
     setVernOpen(!!openVernDialog);
   };
 
-  const addNewEntryAndReset = async (): Promise<void> => {
-    // Prevent double-submission
-    if (submitting) {
-      return;
-    }
-    setSubmitting(true);
-    await addNewEntry();
-    resetState();
-  };
-
   const addOrUpdateWord = async (): Promise<void> => {
     if (suggestedDups.length) {
       // Case 1: Duplicate vern is typed
       if (!selectedDup) {
-        // Case 1a: User hasn't made a selection
+        // Case 1a: User hasn't made a selection (should never happen,
+        // since submission is only triggered from the gloss field,
+        // but left here in case that changes)
         setVernOpen(true);
+        setSubmitting(false);
+        return;
       } else if (selectedDup.id) {
         // Case 1b: User has selected an entry to modify
         await updateWordWithNewGloss();
-        resetState();
       } else {
         // Case 1c: User has selected new entry
-        await addNewEntryAndReset();
+        await addNewEntry();
       }
     } else {
       // Case 2: New vern is typed
-      await addNewEntryAndReset();
+      await addNewEntry();
     }
+    resetState();
   };
 
   const handleGlossEnter = async (): Promise<void> => {
     // The user can never submit a new entry without a vernacular
     if (newVern) {
+      // Blur to prevent double-submission or extending submitted gloss.
+      glossInput.current?.blur();
+      setSubmitting(true);
       await addOrUpdateWord();
+    } else {
+      focus(FocusTarget.Vernacular);
     }
-    focus(FocusTarget.Vernacular);
   };
 
   /** Clear the duplicate selection if user returns to the vernacular field. */
@@ -226,7 +226,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
       <Grid2 size={4}>
         <VernWithSuggestions
           isNew
-          vernacular={newVern}
+          vernacular={submitting ? "" : newVern}
           vernInput={vernInput}
           updateVernField={(newValue: string, openDialog?: boolean) =>
             updateVernField(newValue, openDialog)
@@ -261,7 +261,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
       <Grid2 size={4}>
         <GlossWithSuggestions
           isNew
-          gloss={newGloss}
+          gloss={submitting ? "" : newGloss}
           glossInput={glossInput}
           updateGlossField={setNewGloss}
           handleEnter={() => handleGlossEnter()}
@@ -276,15 +276,15 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
           // note is not available if user selected to modify an existing entry
           <NoteButton
             buttonId={NewEntryId.ButtonNote}
-            noteText={newNote}
+            noteText={submitting ? "" : newNote}
             updateNote={setNewNote}
           />
         )}
       </Grid2>
 
       <Grid2 size={2}>
         <PronunciationsFrontend
-          audio={newAudio}
+          audio={submitting ? [] : newAudio}
           deleteAudio={delNewAudio}
           replaceAudio={repNewAudio}
           uploadAudio={addNewAudio}
@@ -295,7 +295,10 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
       <Grid2 size={1}>
         <DeleteEntry
           buttonId={NewEntryId.ButtonDelete}
-          removeEntry={() => resetState()}
+          removeEntry={() => {
+            resetState();
+            focus(FocusTarget.Vernacular);
+          }}
         />
       </Grid2>
 

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

@@ -66,9 +66,10 @@ const renderNewEntry = async (
   });
 };
 
-/** Fire all Enter key events on the given element.
+/** Fire all Enter key events on document's active element, or body if none.
  * (For use with fake timers, since they don't play well with `userEvent`.) */
-const fireEnterOnElement = async (elem: Element): Promise<void> => {
+const fireEnterOnActiveElement = async (): Promise<void> => {
+  const elem = document.activeElement ?? document.body;
   const enterOptions = { charCode: 13, code: "Enter", key: "Enter" };
   await act(async () => {
     fireEvent.keyDown(elem, enterOptions);
@@ -132,7 +133,8 @@ describe("NewEntry", () => {
     );
 
     // Submit a new entry
-    await fireEnterOnElement(getVernAndGlossFields().glossField);
+    fireEvent.click(getVernAndGlossFields().glossField);
+    await fireEnterOnActiveElement();
     expect(mockAddNewEntry).toHaveBeenCalledTimes(1);
     expect(mockResetNewEntry).not.toHaveBeenCalled();
 
@@ -154,13 +156,13 @@ describe("NewEntry", () => {
     );
 
     // Submit a new entry
-    const { glossField } = getVernAndGlossFields();
-    await fireEnterOnElement(glossField);
+    fireEvent.click(getVernAndGlossFields().glossField);
+    await fireEnterOnActiveElement();
     expect(mockAddNewEntry).toHaveBeenCalledTimes(1);
     expect(mockResetNewEntry).not.toHaveBeenCalled();
 
     // Attempt a second submission before the first one completes
-    await fireEnterOnElement(glossField);
+    await fireEnterOnActiveElement();
     expect(mockAddNewEntry).toHaveBeenCalledTimes(1);
     expect(mockResetNewEntry).not.toHaveBeenCalled();