Cypress hangs after specific click (involving Unstable_TrapFocus)

[ruchamafr]

Current behavior

cypress stuck after clicking and post request hang up

Desired behavior

cypress should continue to the next page

Test code to reproduce

it("save form anonymous before send  ", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      return false;
    });
    cy.visit(
      "https://govforms.gov.il/mw/forms/[email protected]#!simpleFields",{timeout: 30000});
 
 cy.get("#id-1-0-mobxReactForm").type("yyyy")
 cy.wait(200);
 
    cy.get('[data-testid="saveButton"]').click();
 
    cy.get('[data-testid="otp-register-selectOption"]')
      .eq(1)
      .check({ force: true });
 
 
    cy.get('[data-testid="otp-register-field-email"]')
      .type("[email protected]")
      .blur().then(exists => {
        cy.wait(3000)
**here after click cypress stuck**
        cy.get('[data-testid="otp-register-continueButton"]').click({force: true,waitForAnimations: false,animationDistanceThreshold: 20}).then(() => {
          cy.wait('@preflight') });;
      });

})

Cypress Version

13.15.1

Node version

20.12.2

Operating System

windows 10

Debug Logs

No response

Other

No response

[mschile]

What exactly do you mean by Cypress is stuck? What are the console errors?

You may want to check out the Cypress Discord Community , it can be helpful for debugging or answering questions on how to use Cypress.

Right now there doesn't seem to be enough information to reproduce the problem on our end. Forking Cypress Test Tiny makes sharing a reproducible example easier to share and easier for us to replicate your issue. This method also keeps the reproduction as simple as possible, which helps us eliminate potential causes and noise from the investigation.

[ruchamafr]

thank you so much @mschile for answering me ,
we are really in a big problem since this problem
here is the code to reproduce (very simple)
regarding errors I dont get error , just the runner wait freeze a long time

cypress-io/cypress-test-tiny@master...ruchamafr:cypress-test-tiny:patch-1

[ryanthemanuel]

I did some digging on this and it appears that the issue comes from Unstable_TrapFocus. Are you aware of how you all are using that? It seems not to be playing nicely with some of the focus logic inside of Cypress and it's causing an infinite loop. It's unclear still where the problem lies (in Cypress or the third party component), or if there's a workaround, but I'm wondering if you can somehow disable that component during tests/upgrade it/etc. to try and get around the problem?

[ruchamafr]

I did some digging on this and it appears that the issue comes from Unstable_TrapFocus. Are you aware of how you all are using that? It seems not to be playing nicely with some of the focus logic inside of Cypress and it's causing an infinite loop. It's unclear still where the problem lies (in Cypress or the third party component), or if there's a workaround, but I'm wondering if you can somehow disable that component during tests/upgrade it/etc. to try and get around the problem?

Hi ryanthemanuel, I really appriciate your digging because the developer put on metirials ui-package the properties
(Dialog Modal Popover) :
-disableEnforceFocus
-וdisableAutoFocus

and now it works!!
thanks u so much
I would very happy to understand how did you discover the problem beacause I didnt success to digg like you
if you can explain me how
thanks again

[ruchamafr]

Hi @ryanthemanuel , I really appriciate your digging , the developer put on metirials ui-package the properties
(Dialog Modal Popover) :
-disableEnforceFocus
-וdisableAutoFocus

and now it works!!
thanks u so much
I would very happy to understand how did you discover the problem beacause I didnt success to digg like you
if you can explain me how
thanks again