Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.2k stars 4.04k forks source link

Form.Select not displaying two distinct text fields if their value fields are identical. #4420

Open DamianCaine opened 1 year ago

DamianCaine commented 1 year ago

If two or more options in the options prop have the same value in their respective value fields, the Select component only highlights one option for all such cases. For example, const options = [{key:1, text: "opt", value: "opt546"}, {key:2, text: "newOpt", value: "opt546"}, {key:3, text: "diffOpt", value: "opt54"}]; In here, whether we choose "opt" or "newOpt", the Select component only displays "opt" in the input box. Only if the value fields are unique, is it considering the text fields separately.

welcome[bot] commented 1 year ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

naman1608 commented 10 months ago

@layershifter in the dropdown handleClick function, it is comparing the current value and the new value, instead shouldn't it be comparing they keys instead as the keys will always be unique? this may solve the issue. could you guide please

` const newValue = multiple ? .union(this.state.value, [value]) : value const valueHasChanged = multiple ? !!.difference(newValue, currentValue).length : newValue !== currentValue

// notify the onChange prop that the user is trying to change value
if (valueHasChanged) {
  this.setState({ value: newValue })
  this.handleChange(e, newValue)
}

`