Search action does not fire when backspace leads to empty string

[bttf]

We are using the search function as a way to handle user input char by char (making ajax queries based on this event)

The search function doesn't fire though when backspacing from a 1 length string to 0 length.

Currently working around this by using onkeydown and checking for the backspace keycode and remaining length of search value.

Would be nice if either a) search fired on value change regardless or b) keypress event was exposed

[cah-brian-gantzler]

What are you going to do when the search term is blank after backspacing? Since the search term start blank, are you wanting it to fire then as well?

Note the bullet points on this page, the use of options with search may help you as well.

[cibernox]

@bttf Yeah, the reasoning is the one @cah-briangantzler exposed. The search action is not called when the search is completely cleared precisely because there is nothing to search.

Clearing the search intentionally just restores the component to its initial state, displaying the options it had when it was originally opened.

[zimmi]

I would suggest making it configurable if the search action is called with an empty search term. This gives the user greater flexibility to load a default set of options on demand.

Our use case:

We have a runtime dynamic amount of selects on one route. The options of the selects are all coming from the server. Currently we load all the options for all types of selects in the model hook of the route. This is not great for performance and the options may not get used at all.

We would like to get a fresh copy of the options whenever the user chooses to interact with the select (because they may change, it's a single page app after all).

How should we deal with this? Right now I'm thinking about adding a click handler to the select and filling the options property there.

If the search action could be called with a blank search term, the app could choose to load the default set of options there. Or load all of the options, if that's feasible.

[cibernox]

{{#power-select options=options selected=selected onopen=(action "setInitialOpts") search=(action "search") as |opt|}}
  {{opt}}
{{/power-select}}

actions: {
  setInitialOptions() {
    if (!this.get('options')) {
      this.set('options', this.store.query('pets', { page: 1 }));
    }
  },
  seach(term) {
    return this.store.query('pets', { filter: term });
  }
}

I think this covers your usage. You set some default results when the component is opened for the first time. From that point on, you can query the server for more results. If the search is cleared, the content of options will be shown.

[zimmi]

Thanks a lot, @cibernox! That covers it. I should have read the documentation more carefully. Sorry for derailing this issue.

[cah-brian-gantzler]

The search term is blank initially. So you I would assume you want the default set of options. Load the default set of options and assign them to options. When the search term is blank, options will be displayed. When the search term is not blank, search will be called and the options displayed will be the result of the search.

When you are talking about getting a fresh copy of options you are meaning the default options?

If you have different sets of default options, create a computed property that returns the correct default options. When you determine you want to refresh the default set of options, call the method notifyPropertyChange

guess I should have typed faster :) Started this before @cibernox replied

[cibernox]

Don't worry.

Having "lazy dropdowns" that save requests to the server is precisely one of the motivations I had to create the component, specially when you have a form with 6 selects and each contains a collection with over 100 items.

[machty]

Just ran into this due to a common ember-concurrency use cases.

It's not a huge deal but because search doesn't fire on an empty string, e-c has no way to cancel the most recent, single character search.

[jevanlingen]

I just ran into this issue too. We got a wrapped-around-power-select-component that's support a lazy scroll options list (i.e. if a user scrolls down, new options are loaded). If a user searches, the component resets the options with a new lazy options list. But because the search event does not fire on an empty string, no reinitialization does occur.

So for me it would be nice if a blank search term should fire the search event!