# Hide or Modify button on SearchBox

**URL:** <https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [April 17, 2020, 5:11am UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451 "2020-04-17T05:11:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![georgina](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@georgina](https://discuss.elastic.co/u/georgina)\
**Post date:** [April 17, 2020, 5:11am UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451/1 "2020-04-17T05:11:51Z")

</div>

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](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#searchbox) the example:

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

---

<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:** [April 20, 2020, 1:20pm UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451/2 "2020-04-20T13:20:44Z")

</div>

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](https://codesandbox.io/s/search-ui-national-parks-example-kdyms)

---

<div class="post-metadata">

**Author:** ![georgina](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@georgina](https://discuss.elastic.co/u/georgina)\
**Post date:** [April 21, 2020, 9:08pm UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451/3 "2020-04-21T21:08:19Z")

</div>

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.

---

<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:** [April 22, 2020, 1:11pm UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451/4 "2020-04-22T13:11:38Z")

</div>

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](https://github.com/elastic/search-ui) repo.

---

<div class="post-metadata">

**Author:** ![georgina](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@georgina](https://discuss.elastic.co/u/georgina)\
**Post date:** [May 19, 2020, 5:37am UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451/5 "2020-05-19T05:37:18Z")

</div>

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

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

---

<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:** [June 16, 2020, 5:37am UTC](https://discuss.elastic.co/t/hide-or-modify-button-on-searchbox/228451/6 "2020-06-16T05:37:22Z")

</div>

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