Firing tab event on window does not change the document.activeElement

[k2snowman69]

Basic info:

• Node.js version: v9.3.0
• jsdom version: 11.5.1

Minimal reproduction case

const { JSDOM, VirtualConsole } = require("jsdom");

const options = {
 virtualConsole: new VirtualConsole().sendTo(console)
};
const dom = new JSDOM(`
  <div>
    <input className="a" type="text" />
    <input className="b" type="text" />
</div>
`, options);

// tab into a
let event = new dom.window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key
dom.window.dispatchEvent(event);
console.log("Should be a: "+ dom.window.document.activeElement.className);

// now to b
event = new dom.window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key
dom.window.dispatchEvent(event);
console.log("Should be b: "+ dom.window.document.activeElement.className);

// And back to a
event = new dom.window.KeyboardEvent('keydown', { keyCode: 9 }); // Tab key
dom.window.dispatchEvent(event);
console.log("Should be a: "+ dom.window.document.activeElement.className);

How does similar code behave in browsers?

Focus changes between the two input elements in a rotating manner as multiple tabs are pressed

[domenic]

Firing events does not change focus, as you can see: https://jsbin.com/qiresuzisi/edit?html,console,output

Please actually test the code in browsers next time.

[k2snowman69]

Hmm sorry about that. What I was trying to convey is keyboard tabbing; when the user presses the tab event on their keyboard it moves between multiple tabbable dim elements.

I’m looking for something similar to PhantomJS’s Page.sendEvent
http://phantomjs.org/api/webpage/method/send-event.html

When sending the tab to the page, PhantomJS does tab to the next event because it interprets the event as a user event.

Is there a similar function that can be called in jsdom?

[domenic]

You can use element.focus()

[k2snowman69]

This maybe a better example:
https://codepen.io/anon/pen/ZvXreq?editors=1111

Click in the first input box and keep hitting the tab key, you'll see when it reaches the end, it goes back to beginning. The idea is if the three input elements were in a dialog or some other layered context, it makes no sense for the user's to exit that layer.

Now I could fire the event directly on the last element but the goal here is an integration test, not a unit test. If I wanted to unit test this and mock out the user interaction side of it, I would be using Mocha, not Karma + JSDom.

The method to do this in Phantom for your reference is the following

var webPage = require('webpage');
var page = webPage.create();

page.sendEvent('keydown', page.event.key.Tab);

The tab event created "is sent to the web page as if it comes as part of user interaction.". Is there a way to create events and send them to JSDom as if they were user interactions?

[Sebmaster]

No, there are no user actions in jsdom.

[k2snowman69]

PhantomJS it is! Thanks!