Skip to content

Commit

Permalink
Fix Keyboard and DnD incompatibility (#1067) (#1445)
Browse files Browse the repository at this point in the history
`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.
  • Loading branch information
msssk authored and edhager committed Nov 11, 2019
1 parent f3f61a5 commit 1f8faf4
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 3 deletions.
6 changes: 5 additions & 1 deletion Keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ define([
// of the instance) for key events within the grid's header row.
headerKeyMap: null,

// mouseDownEventType: dojo/on compatible event type
// Event type to use for Keyboard's mouse down listener that sets focus.
mouseDownEventType: 'mousedown',

postMixInProperties: function () {
this.inherited(arguments);

Expand Down Expand Up @@ -141,7 +145,7 @@ define([
);
}

grid._listeners.push(on(areaNode, 'mousedown', function (event) {
grid._listeners.push(on(areaNode, grid.mouseDownEventType, function (event) {
if (!handledEvent(event)) {
grid._focusOnNode(event.target, isHeader, event);
}
Expand Down
1 change: 1 addition & 0 deletions doc/components/mixins/Keyboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ Property | Description
`pageSkip` | Number indicating how many rows to navigate when page up or page down is pressed. Defaults to `10`.
`keyMap` | Object hash mapping key codes to callbacks to be executed when the respective keys are pressed within the body of the grid. This is typically augmented by calling `addKeyHandler`, but it can also be completely overridden by passing an object hash to the constructor (or otherwise creating one before `Keyboard#postMixInProperties` executes). The default `keyMap` is exposed via `Keyboard.defaultKeyMap`.
`headerKeyMap` | Object hash mapping key codes to callbacks to be executed when the respective keys are pressed within the header of the grid. This is typically augmented by calling `addKeyHandler`, but it can also be completely overridden by passing an object hash to the constructor (or otherwise creating one before `Keyboard#postMixInProperties` executes). The default `headerKeyMap` is exposed via `Keyboard.defaultHeaderKeyMap`.
`mouseDownEventType` | `dojo/on` compatible event type. Defaults to `'mousedown'`. Can be overridden to use a different event type to register the mouse down event handler that sets focus. Overridden by `dgrid/extensions/DnD` to `touch.press` (from `dojo/touch`) for compatibility with `dojo/dnd/Source`, which is used by `dgrid/extensions/DnD`.

### Method Summary

Expand Down
13 changes: 11 additions & 2 deletions extensions/DnD.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ define([
'dojo/_base/array',
'dojo/aspect',
'dojo/dom-class',
'dojo/on',
'dojo/topic',
'dojo/touch',
'dojo/has',
'dojo/when',
'dojo/dnd/Source',
'dojo/dnd/Manager',
'dojo/_base/NodeList',
'../Selection',
'dojo/has!touch?../util/touch'
], function (declare, lang, arrayUtil, aspect, domClass, on, topic, has, when, DnDSource,
], function (declare, lang, arrayUtil, aspect, domClass, topic, touch, has, when, DnDSource,
DnDManager, NodeList, Selection, touchUtil) {
// Requirements
// * requires a store (sounds obvious, but not all Lists/Grids have stores...)
Expand Down Expand Up @@ -260,6 +260,15 @@ define([
this.inherited(arguments);
// ensure dndParams is initialized
this.dndParams = lang.mixin({ accept: [this.dndSourceType] }, this.dndParams);

// The DnD extension adds a touch.press listener (via dojo/dnd/Source). In browsers
// that support pointer events the presence of this listener prevents dgrid/Keyboard's
// 'mousedown' listener from being called. To ensure dgrid/Keyboard works in conjunction
// with DnD the mouse down event type for dgrid/Keyboard is changed to touch.press.
// Note: this is set in postMixInProperties to ensure it overrides the value in Keyboard
// regardless of which module is mixed in first. This means that if you want to override
// the value set in DnD you need to do so in the postMixInProperties lifecycle method.
this.mouseDownEventType = touch.press;
},

postCreate: function () {
Expand Down

0 comments on commit 1f8faf4

Please sign in to comment.