CMultiSelect not re-rendering on provided options change. Even empty array is provided previous placeholder is still displayed.

[bizon-boxcribe]

• Operating system and version: Windows 10
• Browser and version: Chrome v126.0.6478.128 (Official Build) (64-bit)
• COREui PRO react version: latest - 5.2.0

If the prop options change, the component is not redrawn. If the prop options is emptied (empty array provided), placeholder still shows the previous selection though there are no options to select from When new options prop is provided the onChange is not fired, meaning that submitting the form will keep the old value! There is no easy way to reset the selection programmatically, without using the cleaner prop - it forces devs to remove the component from the view briefly in order to force re-render!

Feature: Please provide a way to programmatically deselect/clear selection ...

Test case:

....
  useEffect(() => {
    if (!item.tenant_id || !item.category_id) return

    loadGroups()
  }, [item.tenant_id, item.category_id])
  
  async function loadGroups() {
    const groupsResponse = await getAiAgentsGroups(auth, {
      tenant: item.tenant_id,
      category: item.category_id,
    })
    initGroupSelectOptions(groupsResponse.results ?? [], groupId)
  }

  function initGroupSelectOptions(groups, selected) {
    setGroupSelectOptions(
      groups.map(({ id, name }) => ({
        label: name,
        value: id,
        selected: id === selected,
      })),
    )
  }
// ...
  return <CMultiSelect
    options={groupSelectOptions}
    multiple={false}
    cleaner={false}
    optionsStyle="text"
    optionsMaxHeight={300}
    onChange={(selectedOptions) =>
    handleSelectChange(selectedOptions, setItem, 'agentgroup_id')
    }
/>

Gif recording:

Similar previous closed bug: #268

[mrholek]

@bizon-boxcribe I will check

[mrholek]

@bizon-boxcribe I just released v5.3.0, please check this example - https://coreui.io/react/docs/forms/multi-select/#coordinated-selection

[github-actions[bot]]

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

[marinkotomic]

This problem persists to this day, Example:

const [test, setTest] = useState([]);

<>
  {JSON.stringify(test)}
  
            <CMultiSelect
              label={"test"}
              onChange={() => {}}
              multiple={false} options={test} />
  
              <button onClick={() => {setTest([{value:Math.random(), label: "RANDOM VALUE " + Math.random(), selected: true}])}}>TEST</button>
</>

When pressing the button, only the first time it will recreate the list, and after that only the first selected remains. One thing is interesting, after multiple list updates, if you switch the multiple prop to true, you will see all items as selected. My guess is the list is always updated, never deleted, and when multiple is false, it takes the first one in the list.

[github-actions[bot]]

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