vakhtang/react-search-bar

The onChange callback is not triggered when the you empty the search bar

nov1n opened this issue · 11 comments

That's intentional. What are you trying to do?

nov1n commented

I am updating a list of items in the onchange event. When the user deletes the last letter, the onchange is not fired so the list is not updated. I changed it now to only update in the onsubmit event.

Do you mean the list isn't being cleared when you remove input? Which version are you using? Please provide a working example if you can.

nov1n commented

When the search bar is empty I'd expect all the items to be shown but that's not the case. Because none of the events are fired, the handlers are not called and thus the ist is not updated

@nov1n Do you expect the default suggestions to be populated when the component is mounted or only when the search bar takes focus?

nov1n commented

I'm not sure I understand what you mean by default suggestions. The only thing I'd like to see is some event being fire when all the characters are removed from the search bar. This would be used to reset the list to its initial state.

What you're describing sounds atypical, so let's confirm:

  1. When the search bar initially mounts or takes focus, no suggestions are displayed
  2. The user enters input, and suggestions are populated
  3. The user clears input, and some "initial" suggestions are populated

Is this correct?

nov1n commented

I use the the search bar to filter a list of products so in my case in step 1 all the items (products) are displayed.

Other than that your description is correct.

The search bar currently isn't designed to act as a filter; it's meant to provide search suggestions asynchronously based on user input. It sounds like what you're trying to do is provide a list of results up front and then filter them as the user provides input.

@nov1n Sounds like you're better off using one of these components:

nov1n commented

Thanks @vakhtang , you've been very helpful. I found a way to make it work. Thanks for making this :)