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
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.
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant
logo are trademarks of the
Apache Software Foundation
in the United States and/or other countries.