Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
carter-erwin opened this issue Jan 12, 2015 · 8 comments
Open

Comments

@carter-erwin
Copy link

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.

@gerpres
Copy link

gerpres commented Jul 2, 2015

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?

@kruthikavenkatathri
Copy link

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?

@gerpres
Copy link

gerpres commented Jan 11, 2017

I just observed the same behavior in chrome 55.0.2883.87

@dylans
Copy link
Member

dylans commented Jan 11, 2017

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 dylans changed the title Some dgrid Keyboard Listeners do not work in IE10 and IE11. Some dgrid Keyboard Listeners do not work in IE10/IE11 and Chrome 55. Jan 11, 2017
@carter-erwin
Copy link
Author

carter-erwin commented Jan 11, 2017

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.

@msssk
Copy link
Contributor

msssk commented Jan 12, 2017

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.

@gerpres
Copy link

gerpres commented Oct 18, 2019

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

msssk added a commit to msssk/dgrid that referenced this issue Nov 8, 2019
`dgrid/extensions/DnD` uses `dojo/dnd/Source` which registers an event handler
using `on(node, touch.press)`. `touch.press` evaluates to `'pointerdown'` in
browsers that support pointer events, and when the `'pointerdown'` listener is
registered the `'mousedown'` listener is never called. This change causes
Keyboard to use `touch.press` when DnD is being used. It also exposes a new
configuration property, `mouseDownEventType`, which enables developers to
further customize this behavior.
edhager pushed a commit that referenced this issue Nov 11, 2019
`dgrid/extensions/DnD` uses `dojo/dnd/Source` which registers an event handler
using `on(node, touch.press)`. `touch.press` evaluates to `'pointerdown'` in
browsers that support pointer events, and when the `'pointerdown'` listener is
registered the `'mousedown'` listener is never called. This change causes
Keyboard to use `touch.press` when DnD is being used. It also exposes a new
configuration property, `mouseDownEventType`, which enables developers to
further customize this behavior.
@dylans
Copy link
Member

dylans commented Dec 5, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants