React-select: [v2] Enter in input does not submit forms

[denchp]

Example:
https://codesandbox.io/s/zrm89776zp

If the input has focus, with the menu closed, pressing enter should submit a containing form.

• What's your use case? (Tell us about your application and what problem you're trying to solve.)
  We're using it as an input in a form.

• What interface do you have in mind? (What new properties or methods do you think might be helpful?)
  Don't prevent default when enter is pressed unless the menu is open. From the look of it, right now it's at the end of the switch case: https://github.com/JedWatson/react-select/blob/v2/src/Select.js

[BertrandFritsch]

I second @denchp on this. Right now, the user has to leave the select field with a tab, then hit the enter key to submit the form.

[goldbuick]

I'm getting the same behavior as well. This is a regression of
https://github.com/JedWatson/react-select/pull/2539/commits/7cf28130f86527f15013ed09906138c7edc4ad41

And with how the code is structured, doesn't look like there is a reasonable workaround

[sarink]

I found a workaround: Attach a ref, use the onKeyDown prop, check for event.key === 'Enter' && !theRef.state.menuIsOpen - this means that the user pressed enter while the menu was closed, so you can submit the form :)

[AntCas]

Having a similar issue. When the user clicks a dropdown menu option they are unable to submit using ENTER unless they click on the field or hit another key first.

The problem is related to the “menuIsOpen” state on the Creatable component (see gif). When I click on the field you can see the menuIsOpen state changes for "false" and then I'm able to submit.

[LiborOl]

Was this issue fixed? It works now after upgrading from 2.2.0 to 3.1.0.

[bladey]

Thanks for the feedback @LiborOl! If this is indeed not fixed, we'll reopen the issue.