Vue-select: Duplicate labels different ids

Created on 31 Jul 2016 · 9Comments · Source: sagalbot/vue-select

Hi,
I have a list of objects which contain value and label. If label is the same but the value is different If you select one of them It considers both selected.

bug released

Source

Donkfather

👍1

Most helpful comment

I'd like to point out that the way the checks are made in the optionComparator doesn't seem to be right:

if (value === this.reduce(option)) { 
    return true 
} 
if ((this.getOptionLabel(value) === this.getOptionLabel(option)) || (this.getOptionLabel(value) === option)) { 
    return true 
} 
if (this.reduce(value) === this.reduce(option)) { 
    return true 
}

Setup this way, no matter how different your values are, the moment the labels are the same, the function's going to return true no matter what. To solve the problem, you need to reverse the tests like this:

if (value !== this.reduce(option)) { 
    return false 
} 
if ((this.getOptionLabel(value) !== this.getOptionLabel(option)) && (this.getOptionLabel(value) !== option)) { 
    return false 
} 
if (this.reduce(value) !== this.reduce(option)) { 
    return false
}
return true

osuwariboy on 9 May 2019

🎉3 👍2

All 9 comments

Thanks for pointing this out, I'll write a regression test for this and get it patched up.

sagalbot on 3 Aug 2016

Ran into the same issue here, any chance this is being looked at?

kreierson on 17 Nov 2017

@sagalbot Just ran into this issue myself. Is there any solution for it?

Yamaha32088 on 28 Jul 2018

https://github.com/sagalbot/vue-select/blob/7b70b966ff1904a053e38d55d231c3ddbcc0a752/src/components/Select.vue#L598-L625

optionComparator is checking the labels first, but not the values. Maybe there should be a specific comparator prop for this situation.

sagalbot on 4 May 2019

@sagalbot I created a pull request that addresses this issue. https://github.com/sagalbot/vue-select/pull/600

We have been running the modified version in our production environment for almost a year now without problems so I think it is stable. However I think it could possibly break some peoples existing code if they are used to it only comparing the labels.

Yamaha32088 on 4 May 2019

@Yamaha32088 good to know, thanks. That PR probably should've been merged a year ago!

sagalbot on 4 May 2019

I'd like to point out that the way the checks are made in the optionComparator doesn't seem to be right:

if (value === this.reduce(option)) { 
    return true 
} 
if ((this.getOptionLabel(value) === this.getOptionLabel(option)) || (this.getOptionLabel(value) === option)) { 
    return true 
} 
if (this.reduce(value) === this.reduce(option)) { 
    return true 
}

if (value !== this.reduce(option)) { 
    return false 
} 
if ((this.getOptionLabel(value) !== this.getOptionLabel(option)) && (this.getOptionLabel(value) !== option)) { 
    return false 
} 
if (this.reduce(value) !== this.reduce(option)) { 
    return false
}
return true

osuwariboy on 9 May 2019

🎉3 👍2

Already 3 years. Some shift? Thanks for info!