Pressing [ENTER] on any input inside <form> element will toggle Downshift

[philipyoungg]

• downshift version: 1.16.1
• npm (or yarn) version: npm 5.5.1

Relevant code or config

const App = () => (
  <form>
    <input type='text'/>
    <Downshift>
      {({isOpen, getButtonProps}) => (
        <div>
          <button {...getButtonProps()}>
            ay
          </button>
          {isOpen &&
            <div>
              Yo wassup
            </div>
          }
        </div>
      )}
    </Downshift>
  </form>
);

What you did: Pressing [ENTER] on any input inside

element

What happened: It will toggle Downshift content

What do I expect: It won't toggle the Downshift component when pressing [ENTER] inside form element.

Reproduction repository: https://codesandbox.io/s/pwn92r9plx

Suggested solution: I haven't checked on the "why" yet. Adding here first so I won't forget it. :)

[serg-plusplus]

@philipyoungg, It's not Downshift fault 🤨
https://codesandbox.io/s/wnm9zwqw0w

[serg-plusplus]

Pressing [ENTER] on any input element calls 'submit' event on form; If Button[type="submit"(by default)] is present in the form - before 'submit' event it will call 'click' event on this button.
How to Fix: <button type="button">... in your Form. 🤗

[philipyoungg]

Whoa didn’t know that before submit—form will click the button with type=submit.

Thanks @NoTruth!

[philipyoungg]

Closing as this is not relevant anymore 😁

[kentcdodds]

My co-worker has this same problem. Maybe we should explicitly return the type as button from getButtonProps unless it's overridden. I don't think anyone would want the button to submit the form.

[philipyoungg]

@kentcdodds agreed.

[serg-plusplus]

Will it be appropriate to create a brunch with upcoming Button changes?
I also want to implement Button_focus() after reset

[kentcdodds]

I also want to implement Button_focus() after reset

I don't think that's a common enough use case to make that the default. More common to want to focus the input I think...

Who wants to make a PR to add type: 'button' to this object?

https://github.com/paypal/downshift/blob/10c69241c9525b9866a42b9f9cbc7f76365bc0e6/src/downshift.js#L554-L561

[kentcdodds]

Actually, this is a great first-timers-only issue... So I'm going to prepare it later today and only allow first-time OSS contributors to submit a PR for it :)

[kentcdodds]

🆕🐥☝ First Timers Only
This issue is reserved for people who never contributed to Open Source before. We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

About First Timers Only.

🤔 What you will need to know
Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you trough the process.

📋 Step by Step

• 🙋 Claim this issue: Comment below
  Please 🙏 only claim if you want to start working on it within a day.
• 👓 Please review our Code of Conduct
  In a nutshell: be patient and actively kind with us 😊
• 📝 Update the file downshift.js in the this repo by following the steps in the CONTRIBUTING.md guide. Please add type: 'button' above this line.
• 🔀 Start a Pull Request. Include the text closes #315 in the description.
  If this is your first, welcome 🎉 😄 Here is a great tutorial on how to send a pull request using the terminal.
• 🏁 Done 👍 Wait patiently for someone to review your PR and provide feedback :)

🤔❓ Questions? Comment here :)

[xutopia]

Hi, I would like to claim this issue please.

[kentcdodds]

Congratulations @xutopia!