ember-power-select
ember-power-select copied to clipboard
power-select-multiple allows duplicate selection
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.
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;
},
[]);
}),