[ComboBox] Pressing enter when no options are selected does not fire onChange callback

[nertzy]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

In a ComboBox, when I press enter after typing text that matches none of the options, the onChange callback never fires, which means that the drop-down is closed, and the text does not match the selected item. Therefore, the user has no way of knowing that the input represents a different value than is displayed.

Steps to reproduce the issue

See my code sandbox: https://codesandbox.io/s/distracted-keldysh-pwhii?file=/src/index.js

1. Select an option
2. Type text that matches none of the options
3. Press enter
4. Notice that onChange never fired, so now the input is in an inconsistent state.

[tw15egan]

Wondering if using the data-invalid attribute could be a workaround to this problem?

data-invalid={textValue !== item ? true : null}

https://codesandbox.io/s/misty-butterfly-inyun?file=/src/index.js

[nertzy]

That workaround doesn't fit our use case particularly well.

We are already using the invalid state to show invalid values upon saving our form. It would be inconsistent UX for us to also introduce an invalid state dynamically before the user submits.

I'm also not sure if we could show the user a message explaining what is wrong in this case without the message hiding and showing as the user types.

The best thing for our use case would be that some callback fires, so that we can programmatically return the ComboBox to a consistent state. I would prefer one of these options:

• Hitting "Enter" without selecting a value does nothing (instead of closing the drop-down)
• Or, hitting "Enter" or has the same effect as hitting "Escape", returning the textbox back to the current selected item's text

Alternatively, if there was some callback that fired, we could handle it in our own code.

[tay1orjones]

The only way we found around this was to use event delegation. Wrap the ComboBox in a div with a keypress handler and call our onChange handler with the value in the textbox via a ref.

  const comboRef = React.createRef();

  const handleOnKeypress = evt => {
    // Current value of input
    const currentValue = comboRef.current.textInput.current.value.trim();
    if (evt.key === 'Enter' && currentValue) {
      const newItem = {
        id: `sampleNewItemID`,
        text: currentValue,
      };
      handleOnChange({ selectedItem: newItem });
    }
  };

  return (
    <div onKeyDown={evt => handleOnKeypress(evt)}>
      <ComboBox 
        ref={comboRef}
        onChange={handleOnChange}
      />
    </div>
);

[nertzy]

Closed by #8476.