Fix the problem when you hit Enter, it submits the forms #3945
Conversation
💥 No ChangesetLatest commit: 76452c3 Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂 If these changes should be published to npm, you need to add a changeset. Click here to learn what changesets are, and how to add one. Click here if you're a maintainer who wants to add a changeset to this PR |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 76452c3:
|
bladey
added
pr/needs-review
bladey
added
pr/needs-review
|
Faced the same issue. Any updates? |
bladey
added
pr/enhancement
There was a problem hiding this comment.
I could be overlooking some things, but I have questions regarding some of the implementation here. I could be over simplifying this, but it seems like replacing
if (!focusedOption) return;with
if (!focusedOption) break;would fix this, so unsure why there is extra logic to identify if the target is a button or to preventDefault on all Enter clicks which are not selecting an option. This is purely assumptive on my part so looking to better understand the use-case here.
| const targetIsButton = event.target && event.target.type === 'button'; | ||
|
|
||
| if (targetIsButton) { | ||
| return; |
There was a problem hiding this comment.
What is the purpose of checking for event.target.type === 'button'
| break; | ||
| } | ||
| return; | ||
| break; |
There was a problem hiding this comment.
Why change return to break here? This seems like a breaking change should a user decide to use react-select with a textarea.
|
Did you find any solution for this? |
5 participants
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.Quick demo here:
https://codesandbox.io/s/react-codesandboxer-example-i6bwn
Steps to reproduce:
Enter key submitting form when menu open but showing no options #3823