Make a WithFont extension of <li> for Autocomplete renderOptions (#2620)

src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx

@@ -3,7 +3,7 @@ import React, { ReactElement, useContext, useEffect } from "react";
 import { Key } from "ts-key-enum";
 
 import { WritingSystem } from "api/models";
-import { TextFieldWithFont } from "utilities/fontComponents";
+import { LiWithFont, TextFieldWithFont } from "utilities/fontComponents";
 import SpellCheckerContext from "utilities/spellCheckerContext";
 
 interface GlossWithSuggestionsProps {
@@ -76,6 +76,16 @@ export default function GlossWithSuggestions(
           variant={props.isNew ? "outlined" : "standard"}
         />
       )}
+      renderOption={(liProps, option, { selected }) => (
+        <LiWithFont
+          {...liProps}
+          analysis
+          aria-selected={selected}
+          lang={props.analysisLang.bcp47}
+        >
+          {option}
+        </LiWithFont>
+      )}
       onKeyPress={(e: React.KeyboardEvent) => {
         if (e.key === Key.Enter) {
           props.handleEnter();

src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx

@@ -3,7 +3,7 @@ import React, { ReactElement, useEffect } from "react";
 import { Key } from "ts-key-enum";
 
 import { WritingSystem } from "api/models";
-import { TextFieldWithFont } from "utilities/fontComponents";
+import { LiWithFont, TextFieldWithFont } from "utilities/fontComponents";
 
 interface VernWithSuggestionsProps {
   isNew?: boolean;
@@ -65,6 +65,11 @@ export default function VernWithSuggestions(
           vernacular
         />
       )}
+      renderOption={(liProps, option, { selected }) => (
+        <LiWithFont {...liProps} aria-selected={selected} vernacular>
+          {option}
+        </LiWithFont>
+      )}
     />
   );
 }

src/utilities/fontComponents.tsx

@@ -15,11 +15,11 @@ import FontContext, { WithFontProps } from "utilities/fontContext";
 type TextFieldWithFontProps = TextFieldProps & WithFontProps;
 
 /**
- * TextField modified for use within a FontContext.
- * Input props are extended with 3 optional props:
- *   analysis: bool? (used to apply the default analysis font);
- *   lang: string? (bcp47 lang-tag for applying the appropriate analysis font);
- *   vernacular: bool? (used to apply the vernacular font).
+ * `TextField` modified for use within a `FontContext`.
+ * The props are extended with 3 optional props:
+ *   `analysis: bool?` (used to apply the default analysis font);
+ *   `lang: string?` (bcp47 lang-tag for applying the appropriate analysis font);
+ *   `vernacular: bool?` (used to apply the vernacular font).
  */
 export function TextFieldWithFont(props: TextFieldWithFontProps): ReactElement {
   const fontContext = useContext(FontContext);
@@ -42,11 +42,11 @@ export function TextFieldWithFont(props: TextFieldWithFontProps): ReactElement {
 type TypographyWithFontProps = TypographyProps & WithFontProps;
 
 /**
- * Typography modified for use within a FontContext.
- * Input props are extended with 3 optional props:
- *   analysis: bool? (used to apply the default analysis font);
- *   lang: string? (bcp47 lang-tag for applying the appropriate analysis font);
- *   vernacular: bool? (used to apply the vernacular font).
+ * `Typography` modified for use within a `FontContext`.
+ * The props are extended with 3 optional props:
+ *   `analysis: bool?` (used to apply the default analysis font);
+ *   `lang: string?` (bcp47 lang-tag for applying the appropriate analysis font);
+ *   `vernacular: bool?` (used to apply the vernacular font).
  */
 export function TypographyWithFont(
   props: TypographyWithFontProps
@@ -64,3 +64,31 @@ export function TypographyWithFont(
     />
   );
 }
+
+type LiWithFontProps = React.DetailedHTMLProps<
+  React.LiHTMLAttributes<HTMLLIElement>,
+  HTMLLIElement
+> &
+  WithFontProps;
+
+/**
+ * `li` modified for use within a `FontContext`.
+ * The props are extended with 3 optional props:
+ *   `analysis: bool?` (used to apply the default analysis font);
+ *   `lang: string?` (bcp47 lang-tag for applying the appropriate analysis font);
+ *   `vernacular: bool?` (used to apply the vernacular font).
+ */
+export function LiWithFont(props: LiWithFontProps) {
+  const fontContext = useContext(FontContext);
+  // Use spread to remove the custom props from what is passed into li.
+  const { analysis, lang, vernacular, ...liProps } = props;
+  return (
+    <li
+      {...liProps}
+      style={fontContext.addFontToStyle(
+        { analysis, lang, vernacular },
+        liProps.style
+      )}
+    />
+  );
+}