The issue with TestCafe click event after the appearance of a modal window

In one scenario, I need to click the "+" button to increase the value in the input field. After that, a modal window appears, which requires confirmation by clicking the confirm button. I need to perform these manipulations several times to achieve the desired result in the input field. I using a while loop. However, upon clicking the button, a modal window appears that covers other elements on the page (DOM overlay is happening). The click action remains on the "+" button, causing a "mousedown" event to occur, which means it is being held down and continues to increase the value of the input field.

Here is my code

    const inputField = Selector(`[data-test-id="${inputId}"]`).find('input');
    
    //I read the actual value of the input into the inputFieldValue variable
    let inputFieldValue: string = await inputField.value;
    
    // The value variable contains the desired value that we want to receive in the input field
    while (inputFieldValue !== value) {
    
    // **Here the issue**
     await t
            .click(Selector(`[data-test-id="${inputId}"]`).find('button').withText('+'))
    
            inputFieldValue = await inputField.value;
    
             // Checking that modal window appears after changing value in input field
             await t.click(this.confirmBtnModalWindow);        
    }
    // If the value matches the urgent and expected test, the test is passed
    await t
           .expect(inputFieldValue).eql(value)
           .catch(() => {
              throw new Error(`Error: expected ${value} in input field but got ${inputFieldValue}`)
    })

How to prevent looping click while executing await t.click(myElem) when Modal Window is overlaid?

1. I tried adding delay in various places with await t.wait(1000);

2. I tried to move the cursor from the "+" button after the click:

   await t.click(Selector([data-test-id="${inputId}"]).find('button').withText('+')) .click('body', {offsetX: 100, offsetY: 100})

But this does not help during the execution of the loop, still the clamping occurs in this line of code: await t .click(Selector([data-test-id="${inputId}"]).find('button').withText('+'))

3.I attempted to add a check to see if the modal window is present. If it is not present, clicking the "+" button should be possible. However, when the modal window appears, the if block prevents the click action from being executed. Unfortunately, the issue persists with the click getting stuck on the button.

It seems like a bug. Please create an issue in the TestCafe repo and share a simple sample that can be reproduced locally without effort.

As a workaround, you can try to dispatch your own event. For example, mousedown:

await t.dispatchEvent(Selector(`[data-test-id="${inputId}"]`).find('button').withText('+'), 'touchstart')