controlled components

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx

@@ -166,18 +166,10 @@ export function CategoryOptions(props: Props) {
 
   let categoryDropdowns = buildDropdowns(
     dropdownCategories, 
+    selectedCategories,
     ttsModelsByCategoryToken, 
     handleChangeCategory);
 
-  const options = [
-    { value: "chocolate", label: "Chocolate" },
-    { value: "strawberry", label: "Strawberry" },
-    { value: "vanilla", label: "Vanilla" },
-    { value: "chocolate", label: "Chocolate" },
-    { value: "strawberry", label: "Strawberry" },
-    { value: "vanilla", label: "Vanilla" },
-  ];
-
   const CATEGORY_SEPARATOR = (
     <div className="d-none d-md-flex align-items-center">
       <FontAwesomeIcon
@@ -206,6 +198,7 @@ export function CategoryOptions(props: Props) {
 
 function buildDropdowns(
   dropdownCategories: TtsCategoryType[][], 
+  selectedCategories: TtsCategoryType[], 
   ttsModelsByCategoryToken: Map<string, Set<TtsModelListItem>>,
   handleChangeCategory : (i: number, categoryToken?: string) => void,
 ) {
@@ -214,6 +207,7 @@ function buildDropdowns(
 
   for (let i = 0; i < dropdownCategories.length; i++) {
     const currentDropdownCategories = dropdownCategories[i];
+    const selectedCategory = selectedCategories[i];
 
     let defaultName = i === 0 ? "All Voices" : "Select...";
 
@@ -255,6 +249,14 @@ function buildDropdowns(
       );
     });
 
+    let selectedCategoryOption = undefined;
+    if (selectedCategory !== undefined) {
+      selectedCategoryOption = {
+        value: selectedCategory.category_token,
+        label: selectedCategory.name_for_dropdown,
+      };
+    }
+
     if (dropdownOptions.length <= 1) {
       // We've run out of subcategories. (1 == "Select...")
       // No sense trying to build more.
@@ -269,7 +271,7 @@ function buildDropdowns(
             <FontAwesomeIcon icon={faTags} />
           </span>
           <Select
-            defaultValue={options[2]}
+            value={selectedCategoryOption}
             options={options}
             classNames={SearchFieldClass}
             onChange={(option) => handleChangeCategory(i, option?.value)}

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { faArrowRightLong, faCompass, faTags } from "@fortawesome/free-solid-svg-icons";
+import { faCompass } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LanguageOptions } from "./LanguageOptions";
 import { TtsCategoryType } from "../../../../../AppWrapper";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
-import { OldMultiDropdownSearch } from "./OldMultiDropdownSearch";
 import { CategoryOptions } from "./CategoryOptions";
 import { ScopedVoiceModelOptions } from "./ScopedVoiceModelOptions";
 
@@ -93,19 +92,19 @@ export function ExploreVoicesModal(props: Props) {
 
           <div className="row gx-3 gy-3">
             <ScopedVoiceModelOptions
-                  allTtsCategories={props.allTtsCategories}
-                  allTtsModels={props.allTtsModels}
+              allTtsCategories={props.allTtsCategories}
+              allTtsModels={props.allTtsModels}
 
-                  allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
-                  allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
-                  ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
+              allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
+              allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
+              ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
 
-                  dropdownCategories={props.dropdownCategories}
-                  selectedCategories={props.selectedCategories}
-                  maybeSelectedTtsModel={props.maybeSelectedTtsModel}
-                  setMaybeSelectedTtsModel={
-                    props.setMaybeSelectedTtsModel
-                  }
+              dropdownCategories={props.dropdownCategories}
+              selectedCategories={props.selectedCategories}
+              maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+              setMaybeSelectedTtsModel={
+                props.setMaybeSelectedTtsModel
+              }
               />
 
           </div>

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/LanguageOptions.tsx

@@ -32,7 +32,7 @@ export function LanguageOptions(props: Props) {
         <FontAwesomeIcon icon={faGlobe} />
       </span>
       <Select
-        defaultValue={languageOptions[0]}
+        value={languageOptions[0]}
         options={languageOptions}
         classNames={SearchFieldClass}
       />

packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ScopedVoiceModelOptions.tsx

@@ -98,7 +98,7 @@ export function ScopedVoiceModelOptions(props: Props) {
           </span>
 
           <Select
-            defaultValue={selectedOption}
+            value={selectedOption}
             options={options}
             classNames={SearchFieldClass}
             onChange={handleChange}

packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx

@@ -44,18 +44,15 @@ export function SelectSearch(props: Props) {
     props.setMaybeSelectedTtsModel(maybeNewTtsModel);
   }
 
-  // TODO/FIXME: The default option is not working.
   let defaultOption = options.length > 0 ? options[0] : undefined;
 
-  //let defaultText = options.length > 0 ? options[0].label : "Search for a voice... (loading)";
-
   if (props.maybeSelectedTtsModel !== undefined) {
     defaultOption = { 
       value: props.maybeSelectedTtsModel.model_token, 
       label: props.maybeSelectedTtsModel.title,
     };
   }
-
+  
   return (
     <>
       <div className="zi-3 input-icon-search">
@@ -63,8 +60,7 @@ export function SelectSearch(props: Props) {
           <FontAwesomeIcon icon={faMicrophone} />
         </span>
         <Select
-          //defaultInputValue={defaultText}
-          defaultValue={defaultOption}
+          value={defaultOption} // Controlled components use "value" instead of "defaultValue".
           isSearchable={true}
           options={options}
           classNames={SearchFieldClass}