Search UI Clear SearchBox Option

[M_M (Miroslav)]

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

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

Miroslav

[JasonStoltz (Jason Stoltzfus)]

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

[M_M (Miroslav)]

Thank you @JasonStoltz
This code block worked for me.

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.

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

[JasonStoltz (Jason Stoltzfus)]

Wouldn't you just do something like this?

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

[M_M (Miroslav)]

Wrapping the elements in a parent div worked for me.

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

Hid the blue search button with CSS

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

Rather than the sugested method in the documentation:
example-of-view-customizations

Thank you @JasonStoltz

[M_M (Miroslav)]

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.