From 07dcedb666a5c5b255f6eb0816f063042a2a53ac Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 19 Jan 2023 03:02:20 -0500
Subject: [PATCH] fixed category defaults on clear

---
 .../explore/CategoryOptions.tsx               | 30 ++++++++++++-------
 .../explore/ExploreVoicesModal.tsx            |  8 ++---
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx
index 29bfe807e4..29b98afd14 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/CategoryOptions.tsx
@@ -32,14 +32,9 @@ interface Props {
 
 export function CategoryOptions(props: Props) {
   const {
-    allTtsCategories,
-    allTtsCategoriesByTokenMap,
     ttsModelsByCategoryToken,
     dropdownCategories,
-    setDropdownCategories,
     selectedCategories,
-    setSelectedCategories,
-    maybeSelectedTtsModel,
     handleChangeCategory,
   } = props;
 
@@ -213,6 +208,24 @@ function buildDropdowns(
       // No sense trying to build more.
       break;
     }
+    
+    let selectProps : any = {
+      options: options,
+      classNames: SearchFieldClass,
+      onChange: (option: any) => handleChangeCategory(i, option?.value),
+      className:"w-100",
+    };
+
+    if (selectedCategoryOption === undefined) {
+      // NB(bt, 2023-01-19): I'm not sure why we're having to do this to clear categories.
+      // If I had more time to spend with this library, I might have a better solution than this hack.
+      selectProps['value'] = {
+        value: "*",
+        label: "Select category...",
+      };
+    } else {
+      selectProps['value'] = selectedCategoryOption;
+    }
 
     categoryDropdowns.push(
       <React.Fragment key={`categoryDropdown-${i}`}>
@@ -221,12 +234,7 @@ function buildDropdowns(
           <span className="form-control-feedback">
             <FontAwesomeIcon icon={faTags} />
           </span>
-          <Select
-            value={selectedCategoryOption}
-            options={options}
-            classNames={SearchFieldClass}
-            onChange={(option) => handleChangeCategory(i, option?.value)}
-            className="w-100"
+          <Select {... selectProps}
           />
         </div>
       </React.Fragment>
diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx
index 7e5cf41a35..96c7dd25b7 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/explore/ExploreVoicesModal.tsx
@@ -23,8 +23,6 @@ interface Props {
 
   maybeSelectedTtsModel?: TtsModelListItem;
   setMaybeSelectedTtsModel: (maybeSelectedTtsModel: TtsModelListItem) => void;
-
-  handleChangeCategory: (level: number, maybeToken?: string) => void;
 }
 
 export function ExploreVoicesModal(props: Props) {
@@ -122,12 +120,12 @@ export function ExploreVoicesModal(props: Props) {
                   <label className="sub-title flex-grow-1">
                   Category
                   </label>
-                  <a
+                  <button
                     className="ms-3 fw-medium"
-                    onClick={() => { props.handleChangeCategory(0, "*"); }}
+                    onClick={() => { handleChangeCategory(0, "*"); }}
                     >
                   Clear category filters
-                  </a>
+                  </button>
                 </div>
 
                 <CategoryOptions