Ember-power-select: Limiting number of items

[knownasilya]

Would love this feature to be built into the select.
Selectize has a property called maxItems.

[cibernox]

Max number of items where? In the list? Or when you filter?

If it's the second, that is as simple as making sour search return at most N items.
If it's the first I'd also do that in the app's side. Just pass to the select the options you want to show.

If your concern is performance, I have experiment using ember-collection that once finished should allow you to show thousands of elements without caring about perf: https://ember-power-select-collection.pagefrontapp.com/

[knownasilya]

For multiple select, so limiting the number of items that can be selected if multiple=true.

[cibernox]

Oh I see it now. At the moment I handle that myself with onchange + onopen.

{{#power-select options=options 
  selected=selected 
  onchange=(action "updateUnlessFull") 
  onopen=(action 'closeIfFull") as |opt|}}
  {{opt}}
{{/power-select}}

actions: {
 closeIfFull(select) {
   if (this.get('selected.lenght') >= 5) { 
     select.actions.close() 
    }
  },
  updateUnlessFull(newOpts) {
   if (this.get('selected.lenght') < 5) { 
      this.set('selected', newOpts); 
    }
  }
}

[knownasilya]

Thanks for the example. Yeah that option would be super nice.

[cibernox]

I'm giving priority to exposing the proper primitives and actions to allow you to do anything over baking more configuration options in the component.

But it's not a crazy idea either. It's common enough to deserve some sugar.

[cibernox]

BTW, multiple=true has gone away a couple versions ago, now the multiple select is a different component.

You might want to consider update versions one step at a time. It might be harder than to update 4 versions at once later.

[knownasilya]

https://github.com/cibernox/ember-power-select-sortable ?

Nice I was wondering if sortable would be an option!

[cibernox]

No, no. It's a different component, but lives in the same addon: {{power-select-multiple}}

[bmfay]

@cibernox is there a good way to approach this with {{power-select-multiple}}? I find that using your approach above, I have to delay the close as the actual opening seems to occur after onOpen.

closeIfFull(select) {
      if (get(this, 'selected').length >= 3) {
        Ember.run.later(() => select.actions.close(), 10)
      }
    },

Which feels very hacky, of course, and is not reliable. Let me know if you have any ideas and thanks for your time.

[BananaNeil]

@bmfay I found a solution in which I set the dropdownClass option to 'hidden' if the selection was full, and then added a global style to my applicaion .hidden { display: none; }

selectFull: computed.gt('selectedItems.length', 2)

{{#power-select-multiple
    selected=selectedItems
    options=options
    dropdownClass=(if selectFull 'hidden')
    as |item|}}
...
{{/power-select-multiple}}