From 474ec40e429bdc14d0b68448b2766ae624eed7dd Mon Sep 17 00:00:00 2001
From: "D. Ror." <imnasnainaec@gmail.com>
Date: Mon, 5 Aug 2024 13:23:11 -0400
Subject: [PATCH] Clear vern selection when user returns to vern text field
 (#3290)

---
 .../EntryCellComponents/VernWithSuggestions.tsx           | 2 ++
 .../DataEntry/DataEntryTable/NewEntry/index.tsx           | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
index 6b63a6e759..661ce52c9e 100644
--- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
+++ b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
@@ -19,6 +19,7 @@ interface VernWithSuggestionsProps {
   updateVernField: (newValue: string, openDialog?: boolean) => void;
   onBlur: () => void;
   onClose?: (e: SyntheticEvent, reason: AutocompleteCloseReason) => void;
+  onFocus?: () => void;
   suggestedVerns?: string[];
   handleEnter: () => void;
   vernacularLang: WritingSystem;
@@ -51,6 +52,7 @@ export default function VernWithSuggestions(
         // onChange is triggered when an option is selected
         props.updateVernField(value ?? "", true);
       }}
+      onFocus={props.onFocus}
       onInputChange={(_e, value) => {
         // onInputChange is triggered by typing
         props.updateVernField(value);
diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
index 00fd98edf3..361ef56ad0 100644
--- a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
+++ b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx
@@ -221,6 +221,13 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
     }
   };
 
+  /** Clear the duplicate selection if user returns to the vernacular field. */
+  const handleOnVernFocus = (): void => {
+    if (selectedDup) {
+      setSelectedDup();
+    }
+  };
+
   const handleCloseVernDialog = (id?: string): void => {
     if (id !== undefined) {
       setSelectedDup(id);
@@ -260,6 +267,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement {
                 setVernOpen(true);
               }
             }}
+            onFocus={handleOnVernFocus}
             suggestedVerns={suggestedVerns}
             // To prevent unintentional no-gloss submissions:
             // If enter pressed from the vern field, check whether gloss is empty