diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx index dcb2976e2a..6b769482f2 100644 --- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx +++ b/src/components/DataEntry/DataEntryTable/EntryCellComponents/DeleteEntry.tsx @@ -13,7 +13,6 @@ interface DeleteEntryProps { // and deletion will happen when the button is pressed confirmId?: string; disabled?: boolean; - wordId?: string; } /** diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx index f4db3e58e1..3870824f27 100644 --- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx +++ b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx @@ -48,7 +48,6 @@ export default function GlossWithSuggestions( filterOptions={(options) => options} // freeSolo allows use of a typed entry not available as a drop-down option freeSolo - includeInputInList // option-never-equals-value prevents automatic option highlighting isOptionEqualToValue={() => false} options={spellChecker.getSpellingSuggestions(props.gloss)} @@ -58,13 +57,7 @@ export default function GlossWithSuggestions( props.onBlur(); } }} - onChange={(_e, newValue) => { - // onChange is triggered when an option is selected - props.updateGlossField(newValue ?? ""); - }} - inputValue={props.gloss} onInputChange={(_e, newInputValue) => { - // onInputChange is triggered by typing props.updateGlossField(newInputValue); }} renderInput={(params) => ( @@ -83,11 +76,17 @@ export default function GlossWithSuggestions( {...liProps} analysis aria-selected={selected} + key={option} lang={props.analysisLang.bcp47} > {SpellChecker.replaceAllButLastWordWithEllipses(option)} )} + /* Even though `onKeyPress` is deprecated, we need to keep using it: + * - `onKeyDown` doesn't work with spelling suggestion selection via Enter, + * because the submission occurs before the selected suggestion is applied; + * - `onKeyUp` doesn't work with SenseDialog selection via Enter, + * because the dialog closes before the key is released. */ onKeyPress={(e: KeyboardEvent) => { if (e.key === Key.Enter) { props.handleEnter(); diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx index 661ce52c9e..f868027d76 100644 --- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx +++ b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx @@ -47,14 +47,11 @@ export default function VernWithSuggestions( freeSolo value={props.vernacular} options={props.suggestedVerns ?? []} + // option-never-equals-value prevents automatic option highlighting + isOptionEqualToValue={() => false} onBlur={props.onBlur} - onChange={(_e, value) => { - // 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); }} onKeyPress={(e: KeyboardEvent) => { @@ -74,7 +71,12 @@ export default function VernWithSuggestions( /> )} renderOption={(liProps, option, { selected }) => ( - + {option} )} diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx index c64fd130c6..d65818911d 100644 --- a/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx +++ b/src/components/DataEntry/DataEntryTable/NewEntry/VernDialog.tsx @@ -30,6 +30,7 @@ export default function VernDialog(props: vernDialogProps): ReactElement { return ( { if (reason !== "backdropClick") { diff --git a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx index 361ef56ad0..162fa7f64d 100644 --- a/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx +++ b/src/components/DataEntry/DataEntryTable/NewEntry/index.tsx @@ -206,19 +206,12 @@ export default function NewEntry(props: NewEntryProps): ReactElement { } }; - const handleEnter = async (checkGloss: boolean): Promise => { + const handleGlossEnter = async (): Promise => { // The user can never submit a new entry without a vernacular if (newVern) { - // The user can conditionally submit a new entry without a gloss - if (newGloss || !checkGloss) { - await addOrUpdateWord(); - focus(FocusTarget.Vernacular); - } else { - focus(FocusTarget.Gloss); - } - } else { - focus(FocusTarget.Vernacular); + await addOrUpdateWord(); } + focus(FocusTarget.Vernacular); }; /** Clear the duplicate selection if user returns to the vernacular field. */ @@ -269,9 +262,10 @@ export default function NewEntry(props: NewEntryProps): ReactElement { }} onFocus={handleOnVernFocus} suggestedVerns={suggestedVerns} - // To prevent unintentional no-gloss submissions: - // If enter pressed from the vern field, check whether gloss is empty - handleEnter={() => handleEnter(true)} + // To prevent unintentional no-gloss or wrong-gloss submissions + // and to simplify interactions with Autocomplete and with the dialogs: + // if Enter is pressed from the vern field, move focus to gloss field. + handleEnter={() => focus(FocusTarget.Gloss)} vernacularLang={vernacularLang} textFieldId={NewEntryId.TextFieldVern} onUpdate={() => conditionalFocus(FocusTarget.Vernacular)} @@ -298,9 +292,7 @@ export default function NewEntry(props: NewEntryProps): ReactElement { gloss={newGloss} glossInput={glossInput} updateGlossField={setNewGloss} - // To allow intentional no-gloss submissions: - // If enter pressed from the gloss field, don't check whether gloss is empty - handleEnter={() => handleEnter(false)} + handleEnter={() => handleGlossEnter()} analysisLang={analysisLang} textFieldId={NewEntryId.TextFieldGloss} onUpdate={() => conditionalFocus(FocusTarget.Gloss)} diff --git a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx index 80088b4191..bdedce59ef 100644 --- a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx +++ b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx @@ -171,7 +171,6 @@ export function RecentEntry(props: RecentEntryProps): ReactElement { buttonId={`${idAffix}-${props.rowIndex}-delete`} confirmId={"addWords.deleteRowWarning"} disabled={editing || props.disabled} - wordId={props.entry.id} />