Merge pull request #10187 from ahocevar/tabindex-scrollover

Set touch-action to allow native touch gestures

src/ol/MapBrowserEventHandler.js

@@ -61,7 +61,6 @@ class MapBrowserEventHandler extends EventTarget {
     this.down_ = null;
 
     const element = this.map_.getViewport();
-    element.setAttribute('touch-action', 'none');
 
     /**
      * @type {number}

src/ol/PluggableMap.js

@@ -131,6 +131,17 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js';
  */
 
 
+/**
+ * @param {HTMLElement} element Element.
+ * @param {string} touchAction Value for `touch-action'.
+ */
+function setTouchAction(element, touchAction) {
+  element.style.msTouchAction = touchAction;
+  element.style.touchAction = touchAction;
+  element.setAttribute('touch-action', touchAction);
+}
+
+
 /**
  * @fires import("./MapBrowserEvent.js").MapBrowserEvent
  * @fires import("./MapEvent.js").MapEvent
@@ -246,9 +257,7 @@ class PluggableMap extends BaseObject {
     this.viewport_.style.overflow = 'hidden';
     this.viewport_.style.width = '100%';
     this.viewport_.style.height = '100%';
-    // prevent page zoom on IE >= 10 browsers
+
-    this.viewport_.style.msTouchAction = 'none';
-    this.viewport_.style.touchAction = 'none';
 
     /**
      * @private
@@ -296,6 +305,12 @@ class PluggableMap extends BaseObject {
      */
     this.keyHandlerKeys_ = null;
 
+    /**
+     * @private
+     * @type {?Array<import("./events.js").EventsKey>}
+     */
+    this.focusHandlerKeys_ = null;
+
     const handleBrowserEvent = this.handleBrowserEvent.bind(this);
     this.viewport_.addEventListener(EventType.CONTEXTMENU, handleBrowserEvent, false);
     this.viewport_.addEventListener(EventType.WHEEL, handleBrowserEvent, false);
@@ -1028,6 +1043,12 @@ class PluggableMap extends BaseObject {
       targetElement = this.getTargetElement();
     }
 
+    if (this.focusHandlerKeys_) {
+      for (let i = 0, ii = this.focusHandlerKeys_.length; i < ii; ++i) {
+        unlistenByKey(this.focusHandlerKeys_[i]);
+      }
+      this.focusHandlerKeys_ = null;
+    }
     if (this.keyHandlerKeys_) {
       for (let i = 0, ii = this.keyHandlerKeys_.length; i < ii; ++i) {
         unlistenByKey(this.keyHandlerKeys_[i]);
@@ -1056,6 +1077,15 @@ class PluggableMap extends BaseObject {
       if (!this.renderer_) {
         this.renderer_ = this.createRenderer();
       }
+      let hasFocus = true;
+      if (targetElement.hasAttribute('tabindex')) {
+        hasFocus = document.activeElement === targetElement;
+        this.focusHandlerKeys_ = [
+          listen(targetElement, EventType.FOCUS, setTouchAction.bind(this, this.viewport_, 'none')),
+          listen(targetElement, EventType.BLUR, setTouchAction.bind(this, this.viewport_, 'auto'))
+        ];
+      }
+      setTouchAction(this.viewport_, hasFocus ? 'none' : 'auto');
 
       const keyboardEventTarget = !this.keyboardEventTarget_ ?
         targetElement : this.keyboardEventTarget_;

src/ol/events/EventType.js

@@ -21,6 +21,7 @@ export default {
    */
   ERROR: 'error',
 
+  BLUR: 'blur',
   CLEAR: 'clear',
   CONTEXTMENU: 'contextmenu',
   CLICK: 'click',
@@ -28,6 +29,7 @@ export default {
   DRAGENTER: 'dragenter',
   DRAGOVER: 'dragover',
   DROP: 'drop',
+  FOCUS: 'focus',
   KEYDOWN: 'keydown',
   KEYPRESS: 'keypress',
   LOAD: 'load',

test/spec/ol/map.test.js

@@ -662,6 +662,21 @@ describe('ol.Map', function() {
       expect(map.handleResize_).to.be.ok();
     });
 
+    it('handles touch-action on focus and blur', function() {
+      expect(map.focusHandlerKeys_).to.be(null);
+      expect(map.getViewport().getAttribute('touch-action')).to.be('none');
+      const target = document.createElement('div');
+      target.setAttribute('tabindex', 1);
+      map.setTarget(target);
+      expect(Array.isArray(map.focusHandlerKeys_)).to.be(true);
+      expect(map.getViewport().getAttribute('touch-action')).to.be('auto');
+      target.dispatchEvent(new Event('focus'));
+      expect(map.getViewport().getAttribute('touch-action')).to.be('none');
+      map.setTarget(null);
+      expect(map.focusHandlerKeys_).to.be(null);
+      expect(map.getViewport().getAttribute('touch-action')).to.be('none');
+    });
+
     describe('call setTarget with null', function() {
       it('unregisters the viewport resize listener', function() {
         map.setTarget(null);