[DataEntry] Let arrows to move out of vern/gloss suggestions (#3321)

sillsdev · Aug 23, 2024 · 7ef8502 · 7ef8502
1 parent 0812f13
commit 7ef8502
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx
@@ -44,12 +44,10 @@ export default function GlossWithSuggestions(
     <Autocomplete
       id={props.textFieldId}
       disabled={props.isDisabled}
-      // there's a bug with disappearing options if filterOptions isn't specified
-      filterOptions={(options) => options}
-      // freeSolo allows use of a typed entry not available as a drop-down option
-      freeSolo
-      // option-never-equals-value prevents automatic option highlighting
-      isOptionEqualToValue={() => false}
+      filterOptions={(options) => options} // prevents a disappearing-options bug
+      freeSolo // allows use of a typed entry not available as a drop-down option
+      includeInputInList // allows arrow up/down out of the suggestions
+      isOptionEqualToValue={() => false} // prevents automatic option highlighting
       options={spellChecker.getSpellingSuggestions(props.gloss)}
       value={props.gloss}
       onBlur={() => {

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
@@ -43,12 +43,11 @@ export default function VernWithSuggestions(
     <Autocomplete
       id={props.textFieldId}
       disabled={props.isDisabled}
-      // freeSolo allows use of a typed entry not available as a drop-down option
-      freeSolo
       value={props.vernacular}
       options={props.suggestedVerns ?? []}
-      // option-never-equals-value prevents automatic option highlighting
-      isOptionEqualToValue={() => false}
+      freeSolo // allows use of a typed entry not available as a drop-down option
+      includeInputInList // allows arrow up/down out of the suggestions
+      isOptionEqualToValue={() => false} // prevents automatic option highlighting
       onBlur={props.onBlur}
       onFocus={props.onFocus}
       onInputChange={(_e, value) => {