Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ComboBox regression in 10.10 (carbon-components-react 7.10)

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Unable to type in text input field of a controlled ComboBox after updating to Carbon 10.10 (carbon-components-react 7.10).

Is this issue related to a specific component?

ComboBox

What did you expect to happen? What happened instead? What would you like to see changed?

Typing in the ComboBox input field should display the typed text. Clicking the ‘x’ on the right side of the ComboBox should clear the selected item.

Clicking the ‘x’ doesn’t appear to do anything, and I am unable to type in the input field.

This was working as expected in 10.9.x/7.9.x

What browser are you working in?

latest Chrome/Firefox/Safari on macOS Catalina

What version of the Carbon Design System are you using?

carbon-components-react 7.10.x carbon-components 10.10.x

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Steps to reproduce the issue

Click in the ComboBox input field
Type some text
Expect to see the typed text displayed

Click the ‘x’ on the ComboBox
Expect to see the selected item cleared

Please create a reduced test case in CodeSandbox

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

carbon-components-react 7.9.3 working as expected https://codesandbox.io/s/gracious-satoshi-jn8z0

carbon-components-react 7.10.0 regression (also tested with latest version) https://codesandbox.io/s/jolly-joliot-45t3t

Additional information

Screenshots or code

expected behaviour ^^^

Notes

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

AlanGreenecommented, Mar 13, 2020

Reverting this change restores the previous behaviour: https://github.com/carbon-design-system/carbon/commit/c4c0da057006bd379ebc5956944c9eec199651db#diff-ac9cf04f95773fcfe4d2132cd4440753L202

0reactions

AlanGreenecommented, Apr 9, 2020

Confirmed this is fixed in 10.11.0/7.11.0, thanks! 🎉

Top Results From Across the Web

Combobox - Carbon Components React

This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make...

Dropdown - Carbon Components React

Name Description Default ariaLabel 'aria‑label' of the ListBox component. string ‑ disabled Disable the control. bool false downshiftProps Additional props passed to Downshift. object ‑

Dropdown – Carbon Design System

Dropdowns present a list of options that can be used to filter or sort existing content. They can also be used as menus....

Dropdown - Multiselect - Carbon Design System

Dropdowns can be used in forms on full pages, in modals, or on side panels. The dropdown component is used to filter or...

select and dropdown - Carbon Design System

The select component allows users to choose one option from a list. It is used in forms for users to submit data.