[Bug]: Fully controlled ComboBox (with selectedItem and onChange provided) does not properly update value

[pedesen]

Package

@carbon/react

Browser

Firefox

Package version

1.58.0

React version

18.3.1

Description

There are issues when ComboBox is used as a fully controlled input (meaning with selectedItem and onChange props provided):

• onChange is not called in some situations
• ComboBox is not cleared when selectedItem changes to null

(see steps to reproduce for details)

This worked with v1.57.0 and stopped working with v1.58.0

Reproduction/example

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

Steps to reproduce

Given: a fully controlled ComboBox component (meaning with selectedItem and onChange props provided):

Bug 1

• change selectedItem prop programmatically to null (click separate "Reset" button in example)

Problem:

• combo box value is not cleared

Bug 2

• Provide selectedItem prop
• Click the "clear selected item" button (x) inside the ComboBox

Problem:

• onChange is not triggered (no console output in example)

Workarounds

For bug 1 there might be a workaround by providing a "key" prop which forces the ComboBox to re-render when selectedItem changes to null. But for bug 2 I wasn't able to find a workaround.

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

[Gururajj77]

Will look into this issue once this #17324 PR's work is in, so that problem on this can be more refined before we begin to work on this.

[H31nz3l]

We encountered the same issue, specifically with the 'ComboBox' not clearing when the selectedItem is set to null. After updating to version @carbon/react ^1.67.1, the problem seems to be resolved."