From f9015edaf613e7becbd1a7b0e5e30164bcd7f8fd Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Fri, 20 Jan 2023 05:14:07 -0500 Subject: [PATCH] fix usability of search --- .../tts/tts_model_list/search/SelectSearch.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) 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}; +}