diff --git a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx
index 916bb62e12..9563510016 100644
--- a/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx
+++ b/packages/fakeyou.com/src/v2/view/tts/tts_model_list/search/SelectSearch.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { Fragment } from "react";
import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
import { TtsCategoryType } from "../../../../../AppWrapper";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
-import Select, { ActionMeta, createFilter } from "react-select";
+import Select, { ActionMeta, createFilter, components } from "react-select";
import Option from "react-select";
import { SearchFieldClass } from "./SearchFieldClass";
import { FastReactSelectOption } from "../../../_common/FastReactSelectOption";
@@ -90,9 +90,21 @@ export function SelectSearch(props: Props) {
// NB: The following settings improve upon performance.
// See: https://github.com/JedWatson/react-select/issues/3128
filterOption={createFilter({ignoreAccents: false})}
- components={{Option: FastReactSelectOption} as any}
+ components={{SingleValue: FixedSingleValue, Option: FastReactSelectOption} as any}
/>
>
);
}
+
+// Problem - search label isn't present when searching, confusing users that don't realize it's
+// a text search box.
+// Ticket: https://github.com/JedWatson/react-select/issues/1351
+// Solution from: https://codesandbox.io/s/hide-selected-on-focus-react-select-n05yi2?file=/src/App.js:531-774
+
+function FixedSingleValue(props: any) {
+ const { children, ...rest } = props;
+ const { selectProps } = props;
+ if (selectProps.menuIsOpen) return ;
+ return {children};
+}