ComboBox doesn't support entry of Text not found in list items

[wnm3]

ComboBox has onInputChange but no way to know when Enter is pressed

Though documentation claims the ComboBox allows people to enter text not found in the list items, there is no notification that this has occurred. There should be an onSubmit method to allow capture of Text that was in the input field when enter was pressed. If text matches a list item, that becomes selected and onChange is fired.

What package(s) are you using?

• carbon-components-react-7.18.0.tgz
• carbon-components-10.18.0.tgz

Detailed description

I can not determine if the user has pressed enter in the ComboBox input to get its value for the ID I'd used to identify the ComboBox if what the user typed is not in the list.

Is this issue related to a specific component? Yes, ComboBox

What did you expect to happen? What happened instead? What would you like to
see changed? I would like an onSubmit or onChange to report an event with the text containing the value of the ComboBox when the user has pressed enter for anything they typed, not just for matching items in the list.

What browser are you working in? Fails in Chrome and Firefox

What version of the Carbon Design System are you using? 10.18.0 for carbon-components

[tw15egan]

Have you tried looking in the Downshift docs to see if there is an event you can hook in to?

Wondering if we need to update our downshift dependency, found this recent issue downshift-js/downshift#1150

[wnm3]

Thanks -- I wasn't really aware of the Downshift docs -- I only saw a reference to downshift-1-title that was needed to be set to update the title of the ComboBox...

I think the ComboBox object should support something like an onSubmit to get whatever text was entered (e.g., without needing to know about Downshift at all). Or perhaps having onChange reporting what was in the input box when Enter was pressed.

My usecase is to provide a list of known choices to replace part of a sentence, but to allow the user to type in something not in the list and use that as the replacement if they press Enter. So, in my case if my list had phone numbers: +1 860 812 5089 and 8608125089, and the person selected the first item and then edited it to remove the "+1 " and pressed Enter, I'd want to know they wanted me to use "860 812 5089" as the replacement text.

[wnm3]

It would be nice if the component supported all methods related to its capabilities, like a setTitle, setRows, etc rather than having to rely on inner components (like having to set the value of the downshift-1-title element).

[wnm3]

I've zipped up my code to try to help show the problems with onChangeInput, etc. If you yarn start run in the js directory, you'll get a modal with a combo box, two text fields, and two buttons. The goal of the dialog is to allow users to update ~mask~ type fields by picking options from the ComboBox and pressing Enter, or entering text into the ComboBox and pressing Enter, or editing what they picked in the list and pressing Enter. I don't think the ComboBox honors its goal of allowing users to input content not found in the list, and I think the onX methods are insufficient for processing this type of logic.

If you type Junk into the combo box text field and then press Enter you'll see the ~name~ changes to Junk. Then if you pick a phone number (say +1 860 742 5185) and press enter, it will replace the ~phone~ field in the resolved text and the combo box will disappear and focus moves to the continue button as desired.

However, if I want to edit my selection (e.g., to remove the +1 from the +1 860 742 5185 to result in the value being just 860 742 5185 I can't get this to work. Also note the onInputChange fires twice when ENTER is pressed.

I think the onInputChange event should report the value and the keyState so we can know if ENTER was pressed (or perhaps there should be an onSubmit for the ComboBox.

It would be nice to be able to set the id for the buttonPrimary and buttonSecondary so we aren't dependent on your class names.

These are the files in the js.zip attached:
zip -r js.zip js/
adding: js/ (stored 0%)
adding: js/yarn-error.log (deflated 64%)
adding: js/yarn.lock (deflated 62%)
adding: js/public/ (stored 0%)
adding: js/public/favicon.ico (deflated 3%)
adding: js/public/index.html (deflated 41%)
adding: js/.gitignore (stored 0%)
adding: js/package.json (deflated 58%)
adding: js/build/ (stored 0%)
adding: js/build/favicon.ico (deflated 3%)
adding: js/build/index.html (deflated 54%)
adding: js/build/precache-manifest.0e6b40c2e17fa2ccff28366bcc0ec2e0.js (deflated 63%)
adding: js/build/asset-manifest.json (deflated 78%)
adding: js/build/static/ (stored 0%)
adding: js/build/static/css/ (stored 0%)
adding: js/build/static/css/main.1c07212c.chunk.css (deflated 89%)
adding: js/build/static/css/main.1c07212c.chunk.css.map (deflated 88%)
adding: js/build/static/js/ (stored 0%)
adding: js/build/static/js/runtime-main.effec05a.js (deflated 51%)
adding: js/build/static/js/2.eb31f598.chunk.js.LICENSE.txt (deflated 75%)
adding: js/build/static/js/2.eb31f598.chunk.js.map (deflated 81%)
adding: js/build/static/js/main.03dee44f.chunk.js (deflated 65%)
adding: js/build/static/js/runtime-main.effec05a.js.map (deflated 65%)
adding: js/build/static/js/2.eb31f598.chunk.js (deflated 71%)
adding: js/build/static/js/main.03dee44f.chunk.js.map (deflated 67%)
adding: js/build/service-worker.js (deflated 45%)
adding: js/src/ (stored 0%)
adding: js/src/carbon-components.min.css (deflated 90%)
adding: js/src/index.js (deflated 52%)
adding: js/src/CollectionCreatePanel.js (deflated 73%)
adding: js/src/index.css (deflated 34%)
adding: js/src/saved.js (deflated 67%)
adding: js/src/.gitignore (stored 0%)
adding: js/src/serviceWorker.js (deflated 63%)

After unzipping, cd js then run yarn install to build the node_modules needed...
js.zip

Note: I ended up having to maintain my own state variables so I could process updates synchronously as the async updates to this.state were not occurring in a way I could reference their updated state.