Enter key submitting form when menu open but showing no options

Within a <form onSubmit={}> form that uses an onSubmit handler and a regular old <button type="submit">, the enter key is submitting the form despite the react-select menu being open. This seems to happen when there are no options to display in the list.

Have created a quick demo here:

https://codesandbox.io/s/react-codesandboxer-example-i6bwn

Steps to reproduce:

1. Type any non-existent colour in the select and ensure you are seeing the “No options” message.
2. Hit enter, see the alert that the form has been submitted.

Is this intended behaviour?

Thanks 😃

[flexdinesh]

Hey @joshamos! You need to prevent the default keydown behaviour. You can use the onKeyDown prop to customize it.

Eg.

const keyDownHandler = e => {
  if (e.key === "Enter") e.preventDefault();
}

<Select ...otherprops onKeydown={keyDownHandler} />

Eg. codesandbox here — https://codesandbox.io/s/react-select-form-submit-jdme8

I’m closing this issue now. If you need to discuss it further pl feel free to reopen it.

[rsslldnphy]

@flexdinesh I’m facing the same thing and I believe this is a real issue:

your proposed solution does prevent form submit when hitting enter with no options to choose from, but it also prevents selecting an option with the enter key when there are options to choose from, and it also prevents submission of the form by pressing the enter key when the menu is not open.

i believe the correct behaviour should be as described in this issue: #2798 - “If the input has focus, with the menu closed, pressing enter should submit a containing form.” - but if the menu is open, it shouldn’t.

i think this should be able to be fixed by adding e.preventDefault() in this block before the return statements: https://github.com/JedWatson/react-select/blob/397e95337f54074cf0705cb5b06ce8951be72f2a/packages/react-select/src/Select.js#L1231-L1235 so that we never propagate the enter key if the menu is open. happy to submit a PR if you would like!