Polaris-react: form onSubmit handler not fired with multiple TextField elements

[pbojinov]

Issue summary

When using the Polaris form elements wrapped in a form element, the form onSubmit handler does not fire when user presses the "ENTER" when in focus of the TextField element.

This only happens when there is more than one TextField element in the form.

Here is a working example of this unexpected behavior: https://codesandbox.io/s/7o8q11r4x

Note that when a form has only one TextField element, the onSubmit handler is fired successfully.

Expected behavior

The form onSubmit handler should be fired when the user presses "ENTER" to submit the form.

Actual behavior

The form's onSubmit handler is never fired when there is more than one TextField element in the form.

Steps to Reproduce the Problem

1. Wrap a TextField element in a form element.
2. Press on your keyboard's "ENTER" key to submit the form
3. The form's onSubmit handler should be fired, but it is not.

Here is a working example of this issue: https://codesandbox.io/s/7o8q11r4x

Specifications

• Polaris version: 1.3.1
• React version: 15.5.3
• Browser: Chrome Version 60.0.3112.90
• Device: MBPR
• Operating System: macOS Sierra 10.12.6

[ry5n]

Thanks for bringing this to our attention @pbojinov. I‘m not quite sure what’s going on here, but I’ve logged this in our internal bug tracker. We’ll look into it and get back to you with what we find and/or a get a bugfix merged as soon as we can.

[ry5n]

Turns out this is normal browser behavior when multiple fields don’t have a name attribute (or multiple fields have the same name). It should work if you provide a unique name for each field.

Thanks again for reporting. Let me know if this doesn’t resolve the issue.

[mbaumbach]

For those still experiencing issues, this may be because you don't have an input/button of type "submit" somewhere in the form. If you have multiple text fields, that's required. Even if you add it and make it hidden with something like "display: none", the enter key will work.

See this Stack Overflow answer for more details: https://stackoverflow.com/questions/4196681/form-not-submitting-when-pressing-enter/4196708