Clear search box after submit

Elastic Search
1

Hello,

I need to clear the input box value after submitting a search.

I tried the solution of this topic :

But if I set setSearchTerm("")

Then:

Filters reseted
query is removed from url

I only want to remove the text from the box

I tried using shouldClearFilters: false , and reset: false with no success

thanks

2

It's a little hard to debug this without any code examples, but just to confirm your usage of shouldClearFilters, are you definitely doing this?

setSearchTerm("", { shouldClearFilters: false });

As for "query is removed from url" - this is expected behavior. The query string in the URL is tied to the browser input. If you don't want this, you need to configure your SearchProvider with trackUrlState: false (although this again has other UX implications - see the docs description).

I'm finding it a little hard to follow your use-case / desired user experience - what may work for you is a custom search input (separate from the default one that comes OOTB from Search UI) that you can "clear" visually without actually triggering an onSearch event.

3

Hello and thanks! ,

I ended up setting up the HTML input tag type="search"

<input type="search"/>

4

Hey Gustavo,

Sorry, I'm not sure I'm understanding your response - are you still having issues after doing so or do you have any other follow-up questions?

5

I'm OK and I will mark my change as the solution.

The requeriment was to clear the search input without affecting the application state, and setting the HTML input to type search added the "x" mark and solved the problem.

Thanks!

6

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