diff --git a/src/events.js b/src/events.js index 02936ac92..dab760251 100644 --- a/src/events.js +++ b/src/events.js @@ -127,7 +127,8 @@ export default function(ctx) { const isKeyModeValid = code => !(code === 8 || code === 46 || (code >= 48 && code <= 57)); events.keydown = function(event) { - if ((event.srcElement || event.target).classList[0] !== 'mapboxgl-canvas') return; // we only handle events on the map + const isMapElement = (event.srcElement || event.target).classList.contains('mapboxgl-canvas'); + if (!isMapElement) return; // we only handle events on the map if ((event.keyCode === 8 || event.keyCode === 46) && ctx.options.controls.trash) { event.preventDefault(); diff --git a/test/utils/key_events.js b/test/utils/key_events.js index 26b659d32..0252cbc28 100644 --- a/test/utils/key_events.js +++ b/test/utils/key_events.js @@ -1,31 +1,36 @@ import createSyntheticEvent from 'synthetic-dom-events'; +const classList = ['mapboxgl-canvas']; +classList.contains = function(cls) { + return classList.indexOf(cls) >= 0; +}; + export const enterEvent = createSyntheticEvent('keyup', { - srcElement: { classList: ['mapboxgl-canvas']}, + srcElement: { classList }, keyCode: 13 }); export const startPointEvent = createSyntheticEvent('keydown', { - srcElement: { classList: ['mapboxgl-canvas']}, + srcElement: { classList }, keyCode: 49 }); export const startLineStringEvent = createSyntheticEvent('keydown', { - srcElement: { classList: ['mapboxgl-canvas']}, + srcElement: { classList }, keyCode: 50 }); export const startPolygonEvent = createSyntheticEvent('keydown', { - srcElement: { classList: ['mapboxgl-canvas']}, + srcElement: { classList }, keyCode: 51 }); export const escapeEvent = createSyntheticEvent('keyup', { - srcElement: { classList: ['mapboxgl-canvas']}, + srcElement: { classList }, keyCode: 27 }); export const backspaceEvent = createSyntheticEvent('keydown', { - srcElement: { classList: ['mapboxgl-canvas']}, + srcElement: { classList }, keyCode: 8 });