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.