# Search UI Clear SearchBox Option

**URL:** <https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [July 22, 2020, 1:02am UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120 "2020-07-22T01:02:19Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![M\_M](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/m_m/32/67595_2.png) [@M\_M](https://discuss.elastic.co/u/M_M)\
**Post date:** [July 23, 2020, 1:54pm UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/6 "2020-07-23T13:54:44Z")

</div>

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.

```auto
<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`

```auto
<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](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451) .  
In the current case I am not using `searchTerm` and do have a `resultSearchTerm`.

---

_[View the full topic](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120)._