[Bug]: Carbon ComboBox does not reset displayed "selectedItem" value after setting to null

[adambarson]

Package

@carbon/react

Browser

Firefox

Package version

@carbon/react: 1.60.3

React version

react: 18.2.0

Description

I am using a ComboBox populated with values from my store. After the user submits the value selected in the combo box, I update the selectedItem to "null", which is also derived from my store. The displayed value in the combo box does not reset and retains the last selected item, even after resetting the selectedItem to "null" in the store.

A workaround for this issue is to use useRef for the key of the of combo box, and useEffect to update the current value of the key any time the selectedItem changes. This will force a re-render of the combo box, resetting its value. Example of workaround:

const comboboxKeyRef = useRef(0)

useEffect(() => {
    comboboxKeyRef.current = `combobox_${Date.now()}`
  }, [selectedItem])
  
  
<ComboBox
            ...other props
            items={items}
            key={comboboxKeyRef.current}
            selectedItem={selectedItem}
/>

Reproduction/example

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

Steps to reproduce

Reproduction example provided in link above. Have selectedItem derived from state and some mechanism that resets selectedItems after user action. Combo box will not reset its displayed item, even after selectedItem is set to null.

Suggested Severity

Severity 3 = User can complete task, and/or has a 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

[gcattan]

+1, we are encountering the same bug.

[abdonrd]

Following the issue, because we've also encountered the same problem.

[k02pradeep]

+1

[rajat-ninawe-pnipl]

Package

@carbon/react

Browser

Firefox

Package version

@carbon/react: 1.60.3

React version

react: 18.2.0

Description

I am using a ComboBox populated with values from my store. After the user submits the value selected in the combo box, I update the selectedItem to "null", which is also derived from my store. The displayed value in the combo box does not reset and retains the last selected item, even after resetting the selectedItem to "null" in the store.

A workaround for this issue is to use useRef for the key of the of combo box, and useEffect to update the current value of the key any time the selectedItem changes. This will force a re-render of the combo box, resetting its value. Example of workaround:

const comboboxKeyRef = useRef(0)

useEffect(() => {
    comboboxKeyRef.current = `combobox_${Date.now()}`
  }, [selectedItem])
  
  
<ComboBox
            ...other props
            items={items}
            key={comboboxKeyRef.current}
            selectedItem={selectedItem}
/>

Reproduction/example

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

Steps to reproduce

Reproduction example provided in link above. Have selectedItem derived from state and some mechanism that resets selectedItems after user action. Combo box will not reset its displayed item, even after selectedItem is set to null.

Suggested Severity

Severity 3 = User can complete task, and/or has a 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[x] I checked the current issues for duplicate problems

Facing same issue. Applying above workaround, it seems to work from external actions but when we click on cross(clear) icon provided by combobox, it does not reset the value.

[pchaudhari23]

+1