Search UI Clear SearchBox Option

Elastic Search
6

The reason why I went with the simple CSS route is because depending on the customization parameters I am loosing focus on the search bar while typing.

The customization works for most of the use-cases.

<SearchBox
    searchAsYouType={true}
    autocompleteSuggestions={false}
    inputView={({
                    getInputProps,
                }) => (
        <>
            <div className="sui-search-box__wrapper">
                <input
                    {...getInputProps({
                        placeholder: "I am a custom placeholder"
                    })}
                />
            </div>
            <ClearSearchBox/>
        </>
    )}
/>

For this mapContextToProps with enabled searchAsYouType

<SearchProvider config={config}> 
   <WithSearch
      mapContextToProps={({
                            wasSearched,
                            setSearchTerm,
                            resultSearchTerm,
                            removeFilter
          }) => ({wasSearched, setSearchTerm, resultSearchTerm, removeFilter})}
     >
        {({wasSearched, setSearchTerm, resultSearchTerm, removeFilter}) => {
          return (
                    ...

you might loose focus on the search box after typing couple of characters and the searchAsYouType query executes.

This issue is also described in another post Hide or Modify button on SearchBox .
In the current case I am not using searchTerm and do have a resultSearchTerm.