Hide or Modify button on SearchBox

[georgina]

Hi,

I'm using search-ui and am attempting to make a simple modification of the SearchBox to change the search button ( replace "search" with an icon).
I see from the docs https://github.com/elastic/search-ui/blob/master/ADVANCED.md#searchbox the example:

<SearchBox inputView={({ getAutocomplete, getInputProps, getButtonProps }) => (
    <>
       <div className="sui-search-box__wrapper">
            <input
              {...getInputProps({
                  placeholder: "I am a custom placeholder"
               })}
            />
           {getAutocomplete()}
      </div>
       <input
           {...getButtonProps({
               "data-custom-attr": "some value"
           })}
       />
    </>
  )}
/>

But when I use this the search box looses focus after entering a char.
I've placed this code inside header = { }

My google searches suggest that this is because it is re-rendering after each char.
But I am not sure how to implement this differently.

I can change the actual input element via
inputProps={{ placeholder: "Search..." , className: "input-class"}}

Is there no similar way to change the submit props?

Thanks Georgina.

[JasonStoltz (Jason Stoltzfus)]

Hi @georgina

You are using the correct approach.

I am not sure why your SearchBox is losing focus like that. The code you've pasted works correctly for me.

I'm not sure exactly what is going on here. If you can reproduce this in a code sandbox I could help you debug.

You could use this one as a base: https://codesandbox.io/s/search-ui-national-parks-example-kdyms

[georgina]

Hi Jason,

Thanks for your reply, I did a quick test in the code sandbox and it worked as expected.

I will strip back my code and see if I can find the issue.

I am using react-router-dom Route, to load different "apps" based on path. These "apps" are connecting to different engines, and have a similar look and feel and share some of the same imports.

Georgina.

[JasonStoltz (Jason Stoltzfus)]

Oh cool, that sounds like a neat project. If you encounter any other issues, feel free to enter issues that are related to Search UI like this directly on the https://github.com/elastic/search-ui repo.

[georgina]

For anyone who encounters this issue, in my mapContextToProps included searchTerm.

Changing searchTerm to resultSearchTerm, resolved the problem with the searchbox loosing focus.