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

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