Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Allow submit button to be outside of the form for implicit submission #21279

Merged
merged 9 commits into from May 5, 2022
6 changes: 6 additions & 0 deletions packages/driver/cypress/fixtures/dom.html
Expand Up @@ -323,6 +323,12 @@
<button type="submit">submit me</button>
</form>

<form id="multiple-inputs-and-button-submit-outside-form">
<input name="fname" />
<input name="lname" />
</form>
<button form="multiple-inputs-and-button-submit-outside-form" type="submit">submit me</button>

<form id="multiple-inputs-and-reset-and-submit-buttons">
<input name="fname" />
<input name="lname" />
Expand Down
Expand Up @@ -1486,6 +1486,16 @@ describe('src/cy/commands/actions/type - #type special chars', () => {
cy.get('#multiple-inputs-and-button-submit input:first').type('foo{enter}')
})

it('triggers form submit when the submit button is outside of the form', function (done) {
this.$forms.find('#multiple-inputs-and-button-submit-outside-form').submit((e) => {
e.preventDefault()

done()
})

cy.get('#multiple-inputs-and-button-submit-outside-form input:first').type('foo{enter}')
})

it('causes click event on the button[type=submit]', function (done) {
this.$forms.find('#multiple-inputs-and-button-submit button[type=submit]').click((e) => {
e.preventDefault()
Expand Down
10 changes: 9 additions & 1 deletion packages/driver/src/cy/commands/actions/type.ts
Expand Up @@ -173,7 +173,15 @@ export default function (Commands, Cypress, cy, state, config) {
const win = state('window')

const getDefaultButtons = (form) => {
return form.find('input, button').filter((__, el) => {
const formId = form.attr('id')
skvale marked this conversation as resolved.
Show resolved Hide resolved
const nestedButtons = form.find('input, button')

const possibleDefaultButtons: JQuery<any> = formId ? $dom.wrap(_.uniq([
...nestedButtons,
...cy.$$('body').find(`input[form='${formId}'], button[form='${formId}']`),
skvale marked this conversation as resolved.
Show resolved Hide resolved
])) : nestedButtons

return possibleDefaultButtons.filter((__, el) => {
const $el = $dom.wrap(el)

return (
Expand Down