Cypress: Reset button not considered during Implicit submission of a form

[RossLote]

Current behavior:

Cypress doesn't allow the user to implicitly submit the form with the {enter} key if either:

• there is a reset button before the submit button
• there is a reset button but no submit button.

All that happens is the form is cleared.

Desired behavior:

Form should submit when Enter key is pressed if there is a reset button present

Steps to reproduce: (app code and test code)

    <form action="." method="GET">
        <input name="search" id="search-field" type="text">
        <button type="reset">Reset</button>
        <button type="submit">Submit</button>
    </form>

cy.get('#search-field').type('foo{enter}')

Versions

cypress 3.2.0

[jennifer-shehane]

Interesting. And you have verified that typing and hitting enter manually does submit the form normally?

I know you are likely wanting to test the enter behavior, but just wanted to make sure you are aware of the .submit() command in Cypress.

[RossLote]

I have checked that it works manually. Yeah I do know about the submit command, thanks.

In my specific use case there is no submit button in the form and it has to be submitted by the user hitting the enter key. There is, however, a reset button.

[Bigdragon13th]

When will someone look into this bug?

[RossLote]

@Bigdragon13th Here is a work around:

1. find this file: ~/.cache/Cypress/{VERSION}/Cypress/resources/app/packages/runner/dist/cypress_runner.js
   _replace {VERSION} with the version of cypress you are using_

2. Look for the line that defines this function: getDefaultButtons

3. A few lines down you will find this:
   return ($dom.isSelector($el, "input") && $dom.isType($el, "submit")) || ($dom.isSelector($el, "button") && !$dom.isType($el, "button"));

4. And replace it with this:
   return ($dom.isSelector($el, "input") && $dom.isType($el, "submit")) || ($dom.isSelector($el, "button") && !($dom.isType($el, "button") || $dom.isType($el, "reset")));

[jennifer-shehane]

The rules for implicit form submission (hitting enter key)

https://www.w3.org/TR/html52/sec-forms.html#implicit-submission

A form element’s default button is the first Submit Button in tree order whose form owner is that form element.

If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the "enter" key while a text field is focused implicitly submits the form), then doing so for a form whose default button has a defined activation behavior must cause the user agent to run synthetic click activation steps on that default button.

So, we should only be looking at the first element of type='submit'

I'm looking at this change, and I don't understand why this second if statement isn't just ($dom.isSelector($el, "button") and $dom.isType($el, "submit")), the element has to have a type of submit, but we're only checking to make sure the button does NOT have a type of button.

Essentially since this line is only looking for any buttons that are NOT of type button, it will find both the type='reset' and type='submit, then (per the spec, expecting these all to be submit types) click the first one, which will be the reset button if it is earlier in the form.

[Bigdragon13th]

@jennifer-shehane I think that line is to serve the behavior of <button> element which state in spec as (quote from https://www.w3.org/TR/html52/sec-forms.html#the-button-element)):

The missing value default is the submit button state.
If the type attribute is in the submit button state, the element is specifically a submit button.

That's mean, if the form has no [type=submit], the first <button> element that doesn't have attribute type will act as submit button.

I guess that line missing the reset type check, or maybe it can be easier to just look for the <button> without type attr.

[Bigdragon13th]

@RossLote Thanks for the workaround, but that's mean it'll only fix my machine issue, not all of my team and servers.

[jennifer-shehane]

@Bigdragon13th Thanks, yup, updated here: https://github.com/cypress-io/cypress/pull/4365

[cypress-bot[bot]]

The code for this is done in cypress-io/cypress#4365, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[Bigdragon13th]

@jennifer-shehane Oh, one thing, I don't know if you guys already cover this case or not, but just for the FYI. Again, from the spec https://www.w3.org/TR/html52/sec-forms.html#implicit-submission

if the form has no Submit Button, then the implicit submission mechanism must do nothing if the form has more than one field that blocks implicit submission, and must submit the form element from the form element itself otherwise.

For the purpose of the previous paragraph, an element is a field that blocks implicit submission of a form element if it is an input element whose form owner is that form element and whose type attribute is in one of the following states: Text, Search, URL, Telephone, E-mail, Password, Local Date and Time, Date, Month, Week, Time, Number

Meaning, these form can be submit using {enter} button even if there's no button in the form at all:

<!-- Can be submit because there's only one field that blocks implicit submission -->
<form id="myForm">
  <input type="text" />
</form>

<!-- Can be submit because there's only one field that blocks implicit submission -->
<!-- Since hidden input is not the blocker -->
<form id="myForm">
  <input type="hidden" value="someValue" />
  <input type="text" />
</form>

While this form cannot be submit until we add some button:

<!-- Cannot submit because there're more than one fields that blocks implicit submission -->
<form id="myForm">
  <input type="text" />
  <input type="text" />
</form>

[cypress-bot[bot]]

Released in 3.3.2.

[jennifer-shehane]

Hey @Bigdragon13th, thanks! I have a PR open for this situation also here that did not make it into 3.3.2 https://github.com/cypress-io/cypress/pull/4574

[Bigdragon13th]

@jennifer-shehane Glad to here that, thanks. Keep up a good work!