ember-power-select icon indicating copy to clipboard operation
ember-power-select copied to clipboard

power-select-multiple allows duplicate selection

Open Caltor opened this issue 6 years ago • 1 comments

power-select-multiple is allowing the user to add duplicate items. This only happens after the record has been saved then reloaded. Looking at https://ember-power-select.com/docs/how-to-use-it and other Issues on here I can see that I need to implement an isEqual method on my POJOs. However even after doing this the problem persists. I have also tried yarn update ember-power-select which has upgraded me to version 2.0.4.

Here is my code to load the options from the webapi backend and add the isEqual method:

this.get('webapi').findAll('barcodeSymbologies').then(x => {
    x.forEach(y => {
        y.isEqual = function(other) {
            return Number(y.id) === Number(other.id);
        };
    })
    
    if (!this.isDestoyed)
    {
        this.set('barcodeSymbologies', x);
    }
})

Here is my template:

{{#power-select-multiple
  options=barcodeSymbologies
  selected=value
  searchField="name"
  onchange=(action (mut value)) as |symbology| }}
    {{symbology.name}}
{{/power-select-multiple}}

Please advise how I can stop this from happening.

Caltor avatar Jul 31 '18 12:07 Caltor

This isEqual implemention is kind of odd and requires a lot of overhead if we go to use ember-power-select with initial data, mostly the objects won't be equal if from another data source!

There was already mentioned, that there should be an argument implemented for a propertyKey, where ember-power-select will check if is equal. Maintainer says no, because he wans the api as slim as possible, but in my eyes it is necessary!

For a work around, I implemented a computed function for not using the isEqual function. Just give back the selected items out of the options pool

 selectedGroups: computed('model.user.groups.edges.[]', function () {
    return this.model.groups.edges.reduce((result, group) => {
        if (this.model.user.groups.edges.mapBy('node.id').includes(group.node.id)) {
          result.push(group)
        }
        return result;
      },
      []);
  }),

AlexAndBear avatar Jun 07 '19 07:06 AlexAndBear