dgrid icon indicating copy to clipboard operation
dgrid copied to clipboard

Some dgrid Keyboard Listeners do not work in IE10/IE11 and Chrome 55.

Open carter-erwin opened this issue 10 years ago • 8 comments

There seems to be in issue in IE10 and IE11 where the dojo.on(KeyDown) listeners which are set in "dgrid/Keyboard" are not registering properly when certain mixin combinations are used. This can be reproduced at http://dgrid.io/js/dgrid/demos/laboratory/ by enabling the "Keyboard" and "DnD" Grid Features. Other features, such as "Selection" can help to highlight the issue, but are not necessary.

carter-erwin avatar Jan 12 '15 21:01 carter-erwin

also ran into this issue. problem is, that in IE(11) the keyboard's mousedown-listener doesn't get called, and therefore the focus is not on the cell/row the keyboard's eventlistener would get called after the DnD event-handler which stops the event.

in chrome, the keyboard-mixin gets the event first, then the DnD

setting the focus works when clicking with the right-mouse-button - since the DnD code doesn't stop this kind of events.

has anybody any idea how how to solve that?

gerpres avatar Jul 02 '15 07:07 gerpres

I also see the same issue. Clearly, clicking on a row does not give focus to the row. But clicking on the dgrid-content or header gets focus. Does anyone have a fix for this?

kruthikavenkatathri avatar Oct 21 '15 20:10 kruthikavenkatathri

I just observed the same behavior in chrome 55.0.2883.87

gerpres avatar Jan 11 '17 12:01 gerpres

I'm wondering if this is similar to https://bugs.dojotoolkit.org/ticket/18932 , which is basically a conflict between pointer events and traditional events.

dylans avatar Jan 11 '17 13:01 dylans

I was able to work around this issue using the below code on my grid widget, though I am not sure it is completely satisfactory, especially since @gerpres mentioned he is seeing this behavior on Chrome 55.0.2883.87.

// Behavior was only occurring in my testing with "pointerdown" events, so dispatch a "mousedown" event.
myGrid.dndSource.onMouseDown = function (e) {
    // This conditional statement avoids duplicate events.
    if (e.type !== "mousedown") {
        var mEvent = document.createEvent("MouseEvent");
        mEvent.initEvent("mousedown", true, true);
        e.target.dispatchEvent(mEvent);
    }
};

The goal of this workaround was to avoid modifying Dojo code, and avoid aspect-oriented solutions.

carter-erwin avatar Jan 11 '17 13:01 carter-erwin

This works simply by luck in Firefox, and fails in other browsers due to the complexity of implementing drag and drop. dojo/dnd exerts a lot of control over pointer events, and in the case of nodes that are designated as DnD sources events can be canceled, causing problems for other code that is listening for them.

Firefox first calls the mousedown handler from dgrid/Keyboard which sets focus on the clicked node, then calls the DnD handler which cancels the event, but to no effect.

Chrome first calls the DnD handler which cancels the event and then dgrid/Keyboard's handler never gets called so focus is not set on the clicked node.

The recommended solution is to use specific DOM nodes as DnD sources, and limit what types of interactions are needed with those nodes. In the dgrid laboratory you can see this approach in action. If you look at the columns listed on the left, each has an icon to its left that is a DnD source - not only does this give a nice visual cue, but it also avoids conflicts between dojo/DnD and other code.

msssk avatar Jan 12 '17 00:01 msssk

any updates on this? in the meanwhile the problem go at least consistent across all browsers - ff69, chrome77, edge, IE11

gerpres avatar Oct 18 '19 10:10 gerpres

@carter-erwin and @gerpres please verify that the fix in #1445 solves your issue, thanks!

dylans avatar Dec 05 '19 03:12 dylans