cy.click() doesn't trigger click event if el to click has "tabindex=0" outside of current viewport

Hi there,

Current behavior:

I’m using tabindex="0" across a vue app to be able to close forms with the ESC key. This feature introduces the following issue: In the tests the cy.click() calls in some cases are not triggering the actual event. Instead it seems like the click just sets the focus.

Desired behavior:

Click event should get triggered.

Test code to reproduce

I’ve tried to reproduce it with the cypress-realworld-app. You can check it out here: https://github.com/tho-masn/cypress-realworld-app/pull/1/files

To reproduce, just run the following test file: cypress/tests/ui/bankaccounts.spec.ts You will see, that the click event doesn’t get fired. There should appear a message below the “save” button saying “Submit worked”. This issue is introduced by adding tabIndex={0} to the form in BankAccountForm.tsx

There are several options to make this example work again:

• Remove the tabIndex={0} attribute again
  • Not an option for me, as I need it to close the forms with ESC
• Add { force: true } to the submit click call in the test.
  • Not an option for me, as I would have to add force: true to basically every click call
• Don’t use a div with a click action handler for the submit button, but a real submit button
  • Not an option for me, as I have click handlers on divs which are not buttons
• Reduce the height of the div below the save button to 500
  • This one is really weird. The issue only appears, if the page grows

Versions

Cypress: v4.12.1 OS: MacOS 10.15.5

[bahmutov]

Released in v6.7.0

[cypress-bot[bot]]

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