pressKey('tab') sometimes works wrong with tabIndex=-1

[alexey-lin]

What is your Test Scenario?

There is a dialog popup and container with tabIndex=-1 in it. There are some inputs in the container.

What is the Current behavior?

When the Tab key is pressed, a focus goes outside the container.

What is the Expected behavior?

When the Tab key is pressed, a focus should keep inside the container, just like it does without TestCafe.

What is your web application and your TestCafe test code?

https://github.com/alexey-lin/testcafe-studio/commit/7b2cb2e0813506fc109acbda6c66285fee95aabc

Doubling of submit\cancel events in dialogs - Regression - GH-391 test

Your complete test report:

 Common tests
 × Doubling of submit\cancel events in dialogs - Regression - GH-391

   1) AssertionError: expected true to be falsy

  	Browser: Electron 7.1.9 / Windows 10

     	59 |    	.expect(await
  	isDialogNotVisible(dialogs.renameFile)).notOk()
     	60 |    	.click(Selector('.tc-file-rename-dialog'), { offsetX:
  	1, offsetY: 1 })
     	61 |    	.pressKey('tab esc');
     	62 |
     	63 |	await t
   	> 64 |    	.expect(await
  	isDialogNotVisible(dialogs.renameFile)).notOk()
     	65 |    	.click(dialogs.renameFile.closeBtn);
     	66 |
     	67 |	await deleteFixture(fileName);
     	68 |});
     	69 |

     	at <anonymous>
  	(C:\work\testcafe-studio\test\functional\fixtures\dialogs\common.js:64:63)



 1/1 failed (25s)

Screenshots:


Steps to Reproduce:

1. Run the test.
2. Launch the app and repeat the same steps manually.
3. See the difference.

Your Environment details:

• testcafe version: 1.8.3-alpha.2
• node.js version: v12.14.1
• command-line arguments: gulp test-functional -s
• browser name and version: Electron 7.1.9
• platform and version: Windows 10

[link89]

Looks like we have the same issue. After pressing tab key via testcafe, the focus move to document root instead of next element. And it works correctly without testcafe.

[Ogurecher]

Hello @link89, Thank you for your input.

[larry-padilla]

Hey! What happened to this? I was trying to test tab navigation inside a modal (http://reactcommunity.org/react-modal/) but did not work, I think it might be related to this because the modal has tabindex="-1" and it just doesn't focus any element inside the modal. Please help!

[Farfurix]

@larry-padilla

Hello,

We have no updates regarding this issue. Could you please share a simple reproducible example to illustrate your scenario?

[deldreth]

Related to #5608, we're running into this same issue in a component library we're developing with our Select component (among a handful of others). Testcafe has an issue when trying to open the dropdown and navigate through the items using the arrow keys. When we switch the tabIndex to 0 on our dropdown container, the issue goes away but then it's added to the tab order on the page - which isn't ideal.

We created a minimal reproduction of the issue here with just a couple divs and an input: https://github.com/deldreth/testcafe-tabindex-minimal

You'll need to run yarn, yarn start, and then testcafe chrome http://localhost:3000.