document.dispatchEvent() not working in Firefox

Question

I'm having this problem where the element.dispatchEvent(e); isn't working properly in Firefox.

The jsFiddle example I'm having trouble with.

The element.dispatchEvent(e); fires, and returns true but the desired event/effect doesn't happen, in the fiddle case, the opening of a select dropdown.

It works fine with Chrome (Version 43.0.2357.134 m).
I'm using Firefox 39.0 to test this, don't know if this is the case with older versions or just the new one.

Any pointers in the right direction would be appreciated.

Answer 1

This may not be the complete answer, since there are a lot of differences in the way broswer handle select elements and events, but part of the issue may be attributed to isTrusted property of the Event object. See here: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

You can see there's already a difference between browser regarding this:

In Firefox, an event is trusted if it is invoked by the user and not
trusted if it is invoked by a script.

In Internet Explorer, all events are trusted except those that are
created with the createEvent() method.

Chrome does not support this property.

And if you look at what isTrusted means: http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#trusted-events

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events. These events trigger the default action of an activation trigger (see Activation triggers and behaviors for more details); these untrusted events have an isTrusted attribute value of false, but still initiate any default actions for backwards compatibility. All other untrusted events must behave as if the Event.preventDefault() method had been called on that event.

So basically, a script-generated event, in Firefox at least, doesn't necessarily behave exactly like a user-generated event. You can use it to trigger default behaviors, such as checking a checkbox or following a link, but in many case it won't do the same thing as actually generating the event through the interface. It'll be fired, but with restrictions.

Again, maybe there's a way to achieve what you're trying, I'm not totally sure that this is the cause of this specific issue, but it's pretty clear from the specs that mimicking user interactions through scripts isn't guaranteed to work.