coreui/coreui-react

CoreUI React Pro MultiSelect - incorrect component state

rtsoftplzen opened this issue · 1 comments

Hi,

the state of CMultiSelect does not match its options property. This only happens when you need to filter options from the outside. In this case, it may happen that the selected option is not part of the options. In such a state, I would expect the component to not have options marked as selected, but the component does have options selected.

So the problem is that it is possible to achieve a state where Multiselect has options in its state but not in its 'property' options.

The issue can be reached at the attached CodePen link:

Option 1:
When a selection is made and the filtering text is then deleted, it results in Multiselect having no options. If the selected options' status is externally deleted (via the Clear button), this change will not be reflected until the previously selected option is included in the 'property' options. To achieve this, filter so that the selected option's external state becomes visible. Once this occurs, CMultiSelect will remove the selected option from its component state of selected options. A side effect is that the onChange event is triggered when CMultiSelect removes the selected option from its state.

Option 2:
If I select multiple options and then remove the filter text, leaving no option in CMultiSelect property options, deleting the external state (using the Clear button) results in no change – all options remain selected in the CMultiSelect state. However, when I start filtering the options to display some one, an unexpected behavior occurs. The option included in the 'options' property is removed, but the others remain, and the onChange event is triggered, causing the remaining options to be set to the external state once again.

Operating system: potentially all (tested on Linux, macOS)
Browser: potentially all (tested on Chrome, Firefox)
CodePen: https://codepen.io/rtsoftplzen/pen/LYaXNpG

Thank you in advance.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions