Check for map canvas using classList.contains() (mapbox#1165) (h/t @n…

…eodescis)

Co-authored-by: Nick Steinbaugh <nsteinbaugh@icr-team.com>

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();

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
 });