[NewEntry] Prevent crash when duplicate vernacular is cleared (#3072)

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

@@ -5,7 +5,7 @@ import {
   MenuList,
   Typography,
 } from "@mui/material";
-import { type ReactElement } from "react";
+import { Fragment, type ReactElement } from "react";
 import { useTranslation } from "react-i18next";
 
 import { GramCatGroup, type Word } from "api/models";
@@ -24,6 +24,10 @@ interface vernDialogProps {
 }
 
 export default function VernDialog(props: vernDialogProps): ReactElement {
+  if (!props.vernacularWords.length) {
+    return <Fragment />;
+  }
+
   return (
     <Dialog
       maxWidth={false}
@@ -36,6 +40,7 @@ export default function VernDialog(props: vernDialogProps): ReactElement {
     >
       <DialogContent>
         <VernList
+          vernacular={props.vernacularWords[0].vernacular}
           vernacularWords={props.vernacularWords}
           closeDialog={props.handleClose}
           analysisLang={props.analysisLang}
@@ -46,6 +51,7 @@ export default function VernDialog(props: vernDialogProps): ReactElement {
 }
 
 interface VernListProps {
+  vernacular: string;
   vernacularWords: Word[];
   closeDialog: (wordId?: string) => void;
   analysisLang?: string;
@@ -96,7 +102,7 @@ export function VernList(props: VernListProps): ReactElement {
   menuItems.push(
     <StyledMenuItem key="new-entry" onClick={() => props.closeDialog("")}>
       {t("addWords.newEntryFor")}
-      {props.vernacularWords[0].vernacular}
+      {props.vernacular}
     </StyledMenuItem>
   );
 

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

@@ -5,7 +5,9 @@ import configureMockStore from "redux-mock-store";
 
 import { Word } from "api/models";
 import StyledMenuItem from "components/DataEntry/DataEntryTable/NewEntry/StyledMenuItem";
-import { VernList } from "components/DataEntry/DataEntryTable/NewEntry/VernDialog";
+import VernDialog, {
+  VernList,
+} from "components/DataEntry/DataEntryTable/NewEntry/VernDialog";
 import theme from "types/theme";
 import { testWordList } from "types/word";
 import { defaultWritingSystem } from "types/writingSystem";
@@ -23,7 +25,21 @@ const mockState = {
 };
 const mockStore = configureMockStore()(mockState);
 
-describe("VernList ", () => {
+describe("VernDialog", () => {
+  it("handles empty list", () => {
+    createVernDialogInstance([], true);
+    const vernList = testRenderer.root.findAllByType(VernList);
+    expect(vernList).toHaveLength(0);
+  });
+});
+
+describe("VernList", () => {
+  it("handles empty list", () => {
+    createVernListInstance([], jest.fn());
+    const menuItems = testRenderer.root.findAllByType(StyledMenuItem);
+    expect(menuItems).toHaveLength(1);
+  });
+
   it("closes dialog when selecting a menu item", () => {
     const closeDialogMockCallback = jest.fn();
     const words = testWordList();
@@ -42,6 +58,28 @@ describe("VernList ", () => {
   });
 });
 
+function createVernDialogInstance(
+  _vernacularWords: Word[],
+  open: boolean
+): void {
+  renderer.act(() => {
+    testRenderer = renderer.create(
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <Provider store={mockStore}>
+            <VernDialog
+              vernacularWords={_vernacularWords}
+              open={open}
+              handleClose={jest.fn()}
+              analysisLang={defaultWritingSystem.bcp47}
+            />
+          </Provider>
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
+  });
+}
+
 function createVernListInstance(
   _vernacularWords: Word[],
   _mockCallback: jest.Mock
@@ -52,6 +90,7 @@ function createVernListInstance(
         <ThemeProvider theme={theme}>
           <Provider store={mockStore}>
             <VernList
+              vernacular="mockVern"
               vernacularWords={_vernacularWords}
               closeDialog={_mockCallback}
               analysisLang={defaultWritingSystem.bcp47}