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

[AlanGreene]

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

A:

1. Click in the ComboBox input field
2. Type some text
3. Expect to see the typed text displayed

B:

1. Click the 'x' on the ComboBox
2. 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

[tw15egan]

Hmm, it seems like even in the older version, you are able to type but it isn't actually sorting anything.

Here's what I've got using the latest version: https://codesandbox.io/s/fancy-tree-g68hr

If you need an initialSelectedItem, I believe it then makes the component a controlled component, so you'll need to attach onChange handlers to update the state of the ComboBox. Here is a link to an example of our controlled ComboBox:

carbon/packages/react/src/components/ComboBox/ComboBox-story.js

Lines 69 to 81 in 5d8392d

	const ControlledComboBoxApp = props => {
	const [selectedItem, setSelectedItem] = useState(items[0]);
	let uid = items.length;
	return (
	<>
	<ComboBox
	{...props}
	items={items}
	itemToString={item => (item ? item.text : '')}
	onChange={({ selectedItem }) => setSelectedItem(selectedItem)}
	initialSelectedItem={items[0]}
	selectedItem={selectedItem}
	/>

[AlanGreene]

Hmm, it seems like even in the older version, you are able to type but it isn't actually sorting anything.

It's highlighting the matched item in our application using 7.9.3, so I guess I removed too much for the example here.

If I add initialSelectedItem to your example I get the same behaviour as with selectedItem, it becomes a fully controlled component. Looking at the code it doesn't seem to be doing what the name would suggest, surely it should just be used to populate the initial state, but not act as a controlling prop:

carbon/packages/react/src/components/ComboBox/ComboBox.js

Line 35 in 9e7b37e

if (props.initialSelectedItem) {

What we need (and had with 7.9.3) is a controlled dropdown (via selectedItem) where the text input can be freely modified allowing an easier way to select a value by typing some substring of a valid option instead of scrolling or using arrow keys. This is crucial for long lists of items. Essentially it behaved as if the dropdown and text input were separate, with only the dropdown being controlled.

I'll try to update the example to be more representative of our use so you can see how it worked in the older version.
Updated the sandboxes to give a more representative example of what we're trying to do, you can see the highlighting works as expected in the 7.9.3 version when typing. If you change selectedItem to initialSelectedItem you'll get the same behaviour, including the broken behaviour on the 7.10 version.

[AlanGreene]

Reverting this change restores the previous behaviour: c4c0da0#diff-ac9cf04f95773fcfe4d2132cd4440753L202

[AlanGreene]

@asudoh Thanks for the fix. Will this be included in 10.11.0 or will it have to wait for the next patch release?

[AlanGreene]

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