# 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:** 7\
**Page:** 1

<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 22, 2020, 1:02am UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/1 "2020-07-22T01:02:19Z")

</div>

Hello,

I there an option to clear the `SearchBox` or that needs to be implemented via custom component as described in the documentation?

[https://github.com/elastic/search-ui/blob/master/ADVANCED.md#build-your-own-component](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#build-your-own-component)

What is the method that would be called to clear the `SearchBox`?

Miroslav

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [July 22, 2020, 11:23am UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/2 "2020-07-22T11:23:45Z")

</div>

Hey @M_M. The method you would use to clear the searchbox is `setSearchTerm`. You would pass an empty string. [https://github.com/elastic/search-ui/blob/master/ADVANCED.md#actions](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#actions)

---

<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 22, 2020, 1:08pm UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/3 "2020-07-22T13:08:16Z")

</div>

Thank you @JasonStoltz  
This code block worked for me.

```auto
import React from "react";
import {withSearch} from "@elastic/react-search-ui";

function ClearSearchBox({setSearchTerm}, shouldClearFilters) {
    return (
        <div className="sui-search-box__close">
            <button onClick={() => setSearchTerm("", {shouldClearFilters: false})}>&#10005;
            </button>
        </div>
    );
}

export default withSearch(({setSearchTerm, shouldClearFilters}) => ({
    setSearchTerm, shouldClearFilters
}))(ClearSearchBox);

```

My next question.  
How would I render this button inside the `SearchBox` div?  
I couldn't add this custom component to the `header` only to the `SideContent`.

```auto
 <Layout
        header={
               <SearchBox
                autocompleteMinimumCharacters={2}
                searchAsYouType={true}
               />
               }
      sideContent= {
               <div>
                    <ClearSearchBox/>
             ....
               </div>
             }
....

```

---

<div class="post-metadata">

**Author:** ![JasonStoltz](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jasonstoltz/32/49893_2.png) [@JasonStoltz](https://discuss.elastic.co/u/JasonStoltz)\
**Post date:** [July 22, 2020, 2:22pm UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/4 "2020-07-22T14:22:05Z")

</div>

Wouldn't you just do something like this?

```auto
 <Layout
        header={
            <div>
               <SearchBox
                autocompleteMinimumCharacters={2}
                searchAsYouType={true}
               />
               <ClearSearchBox/>
             </div>
               }

```

---

<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 22, 2020, 5:59pm UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/5 "2020-07-22T17:59:32Z")

</div>

Wrapping the elements in a parent div worked for me.

```auto
header={
 <div className="sui-layout-header__inner">
                <SearchBox
                   searchAsYouType={true}
                   shouldClearFilters={false}
                   autocompleteSuggestions={false}
                 /> 
         <ClearSearchBox/>
 </div>
}

```

Hid the blue search button with CSS

```auto
.sui-search-box__submit {
    display: none;
}

```

Rather than the sugested method in the documentation:  
[example-of-view-customizations](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#example-of-view-customizations)

Thank you @JasonStoltz

---

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 20, 2020, 1:54pm UTC](https://discuss.elastic.co/t/search-ui-clear-searchbox-option/242120/7 "2020-08-20T13:54:51Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.