[Bug]: "Minified React error #185" with Dropdown component on @carbon/react v1.61.0

[Aaron-Hu]

Package

@carbon/react

Browser

Firefox

Package version

v1.61.0

React version

18.3.1

Description

After i upgrade @carbon/react to v1.61.0, i got this error when select items from Dropdown list. I cannot reproduce this error every time, however it may happen when the page is just loaded.

According to the error, it ask me to look at https://react.dev/errors/185?invariant=185, and i checked it, seems like my code is fine. And once i change @carbon/react to v1.60.3, the error will never happen again. So i thought it maybe a bug inside @carbon/react Dropdown component, but i am not sure about this.

const [predClass, setPredClass] = useState("");
<Dropdown
                  id="prediction-inline"
                  titleText={"some text"}
                  label={"label"}
                  type="inline"
                  items={Object.keys(mapper)}
                  selectedItem={predClass}
                  onChange={(obj) => setPredClass(obj.selectedItem)}
                />

Reproduction/example

https://react.carbondesignsystem.com/?path=/docs/components-dropdown--overview

Steps to reproduce

As i said, In my app, i can reproduce when the page is just loaded and select item from Dropdown quickly. I didn't recreate on https://react.carbondesignsystem.com/?path=/docs/components-dropdown--overview, but we run our automation test on https://react.carbondesignsystem.com/?path=/docs/components-dropdown--overview, and the automation test reproduce it.

Suggested Severity

None

Application/PAL

No response

Code of Conduct

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

[2nikhiltom]

Hey @Aaron-Hu , I am unable to recreate this on react_storybook Could you share more context from your reproduction environment or maybe a Stackblitz example of this

and the automation test reproduce it

Logs of this could be useful as well for us to look into this further

[Aaron-Hu]

@2nikhiltom Guidance for reproducing the issue with the automation:

1. Install some python playwright packages: python -m ensurepip pip3 install pytest-playwright playwright install pip3 install pytest-html pip3 install ConfigParser pip3 install py
2. Switch to the test python file directory then issue the command: pytest -sv playwright_test.py --browser chromium --headed --slowmo 500
3. The automation will open the page and simulate the behaivor to click the Inline dropdown with Option 2 item
4. The page is crashed and becomes an empty page. You can also open the browser console to check the errors.

The test code is here: playwright_test.py.zip

[Aaron-Hu]

Hi @2nikhiltom, have you reproducing this issue with the automation? if you need help on this, i can take a video record.

[2nikhiltom]

Hey @Aaron-Hu , I am speculating this is similar to https://github.com/carbon-design-system/carbon/issues/17001, The fix for which was recently released v11.62.1 Could you please move to v11.62.1 and confirm this fixes your issue ?

[Aaron-Hu]

Thank you @2nikhiltom it works after upgrade to v1.62.1, the Dropdown issue disappeared. Unfortunately, we encounter this issue again after move to v1.62.1, and this time it was Multiselect component. https://react.carbondesignsystem.com/?path=/docs/components-multiselect--overview

The automation code is here: playwright_test.py.zip

[2nikhiltom]

Hey @Aaron-Hu , Similar issues with Multiselect and Filterable Multiselect components are fixed via this_PR we are planning to release this by Monday, let us know if your team requires a urgent patch for this.

[riddhybansal]

Fixed via #17002