[Bug]: MultiSelect selection results in an infinite loop

[tay1orjones]

Package

@carbon/react

Browser

Chrome

Package version

11.57.0

React version

18

Description

When selecting the first option twice, the multiselect is rerendered in an infinite loop.

Reproduction/example

https://stackblitz.com/edit/github-pxnmha?file=src%2FApp.jsx

Steps to reproduce

Select the first option. Select it again. Select it again. Eventually you'll hit

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[ychavoya]

Hello, I just wanted to share some background on this issue since I have been working on it, in case it helps the person that works on it.

There was a bug where selecting an item triggered a console warning, which #15818 solved (the warning no longer appeared).

However, this caused the UI not to update when updating the items via the selectedItems prop. The UI updated fine when the user took action but programmatic tasks (setting the selectedItems prop from outside of the component) did not. This was fixed in #16139 by triggering an update whenever the prop is updated from outside.

However, now programmatic tasks work fine, but when the user takes action it creates an infinite update loop. which is what the issue is referring to.

My guess on why the infinite update cycle happens is because we are storing the selected items in two places when the Multiselect is controlled (outside the component and in the useState hook inside). Something then could make these two states different triggering an update loop via the added useEffect. I would try to figure out if there is a way to remove the useState that was added to fix the console warning (since both kinds of updates were working before that change) without triggering the console warning that was fixed in the first place.

Hope this helps