From 1228d0aa96a9f21fffe1fe1a53db4be46b5001b3 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Fri, 22 Sep 2023 13:28:03 -0400
Subject: [PATCH] Make a WithFont extension of <li> for Autocomplete
 renderOptions (#2620)

---
 .../GlossWithSuggestions.tsx                  | 12 ++++-
 .../VernWithSuggestions.tsx                   |  7 ++-
 src/utilities/fontComponents.tsx              | 48 +++++++++++++++----
 3 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx
index f55f31ea2a..490aa1aa25 100644
--- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/GlossWithSuggestions.tsx
+++ b/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();
diff --git a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx b/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
index e314963285..9d67cb6e01 100644
--- a/src/components/DataEntry/DataEntryTable/EntryCellComponents/VernWithSuggestions.tsx
+++ b/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>
+      )}
     />
   );
 }
diff --git a/src/utilities/fontComponents.tsx b/src/utilities/fontComponents.tsx
index bd39782961..a0812f7c65 100644
--- a/src/utilities/fontComponents.tsx
+++ b/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
+      )}
+    />
+  );
+}