Enter event on form wrapped input should not have e.preventDefault()

First of all thanks @kentcdodds for authoring this library! Also thanks to everyone else who’s been helping Kent maintain this project ❤️.

• downshift version: 1.28.0
• node version: v8.1.3
• yarn version: 1.2.1

What you did:

I type the string “black” (lowercase) into the form example in Downshift’s storybook - then hit ENTER.

What happened:

The form submission handler does not get called. However, my expectation is that the form submit handler gets called even though lowercase “black” isn’t a part of the list. This is important when building autocomplete for search services. When a user hits ENTER, I want to still be able to execute a search on lowercase “black”, even though it is not part of the list in the combobox:

Reproduction repository:

Reproducible in Downshift Storybook in the form example.

Problem description:

I think that a <form> submission handler should always be called on ENTER, even if the combo box list is open. I believe in the past, a <form> submission was not possible entirely, see #161.

Pull request #161 made it possible to submit the <form>, but not when the combobox list isOpen.

Suggested solution:

I am not sure I have an elegant solution. I am seeking the help of the community on this one. Please let me know if I got this all wrong and I’m simply not understanding the correct usage of Downshift.

A solution could be for Downshift to accept a prop isForm to Downshift. Then we will not call e.preventDefault when a user presses ENTER at all if the consumer of the component tells Downshift that a <form> wraps its <input>.

[kentcdodds]

Ok, great! It’s out and it’s actually downshift@1.29.0 (because this is a new feature 😅)

Thanks again!

[hzhu]

I’m glad that the solution seems to work for you! I’d love a PR. If you’d prefer to wait for your co-worker to weigh in that’s fine with me.

Hi @kentcdodds, my schedule’s been hectic but I’ll try to submit a PR for review this weekend 😸 !