fix(gesture): 'drag' gestures don't clean up touch action styles on parent

Fixes #11147

Author: Splaktar

src/components/bottomSheet/bottom-sheet.js

@@ -168,7 +168,7 @@ function MdBottomSheetDirective($mdBottomSheet) {
  *
  * @description
  * Hide the existing bottom sheet and resolve the promise returned from
- * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottomsheet (if
+ * `$mdBottomSheet.show()`. This call will close the most recently opened/current bottom sheet (if
  * any).
  *
  * <em><b>Note:</b> Use a `.then()` on your `.show()` to handle this callback.</em>
@@ -303,6 +303,10 @@ function MdBottomSheetProvider($$interimElementProvider) {
 
     /**
      * Adds the drag gestures to the bottom sheet.
+     * @param {angular.JQLite} element where CSS transitions will be applied
+     * @param {angular.JQLite} parent used for registering gesture listeners
+     * @return {Function} function that removes gesture listeners that were set up by
+     *  registerGestures()
      */
     function registerGestures(element, parent) {
       var deregister = $mdGesture.register(parent, 'drag', { horizontal: false });

src/core/services/gesture/gesture.js

@@ -115,7 +115,7 @@ MdGestureProvider.prototype = {
  * @ngInject
  */
 function MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {
-  var touchActionProperty = getTouchAction();
+  var touchActionProperty = $mdUtil.getTouchAction();
   var hasJQuery = (typeof window.jQuery !== 'undefined') && (angular.element === window.jQuery);
 
   var self = {
@@ -276,16 +276,26 @@ function MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {
         horizontal: true,
         cancelMultiplier: 1.5
       },
+      /**
+       * @param {angular.JQLite} element where touch action styles need to be adjusted
+       * @param {{horizontal: boolean}=} options object whose horizontal property can specify to
+       *  apply 'pan-y' or 'pan-x' touch actions.
+       */
       onSetup: function(element, options) {
         if (touchActionProperty) {
           // We check for horizontal to be false, because otherwise we would overwrite the default opts.
           this.oldTouchAction = element[0].style[touchActionProperty];
           element[0].style[touchActionProperty] = options.horizontal ? 'pan-y' : 'pan-x';
         }
       },
+      /**
+       * @param {angular.JQLite} element where styles need to be cleaned up
+       */
       onCleanup: function(element) {
         if (this.oldTouchAction) {
           element[0].style[touchActionProperty] = this.oldTouchAction;
+        } else {
+          element[0].style[touchActionProperty] = null;
         }
       },
       onStart: function (ev) {
@@ -362,20 +372,6 @@ function MdGesture($$MdGestureHandler, $$rAF, $timeout, $mdUtil) {
         }
       }
     });
-
-  function getTouchAction() {
-    var testEl = document.createElement('div');
-    var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
-
-    for (var i = 0; i < vendorPrefixes.length; i++) {
-      var prefix = vendorPrefixes[i];
-      var property = prefix ? prefix + 'TouchAction' : 'touchAction';
-      if (angular.isDefined(testEl.style[property])) {
-        return property;
-      }
-    }
-  }
-
 }
 
 /**

src/core/services/gesture/gesture.spec.js

@@ -364,17 +364,18 @@ describe('$mdGesture', function() {
 
   describe('drag', function() {
 
-    var startDragSpy, el, dragSpy, endDragSpy, doc;
+    var startDragSpy, el, dragSpy, endDragSpy, doc, deRegisterEvents, touchAction;
 
     beforeEach(function() {
-      inject(function($mdGesture, $document) {
+      inject(function($mdGesture, $document, $mdUtil) {
         doc = $document;
         startDragSpy = jasmine.createSpy('dragstart');
         dragSpy = jasmine.createSpy('drag');
         endDragSpy = jasmine.createSpy('dragend');
         el = angular.element('<div>');
 
-        $mdGesture.register(el, 'drag');
+        touchAction = $mdUtil.getTouchAction();
+        deRegisterEvents = $mdGesture.register(el, 'drag');
         el.on('$md.dragstart', startDragSpy)
           .on('$md.drag'     , dragSpy)
           .on('$md.dragend'  , endDragSpy);
@@ -448,6 +449,12 @@ describe('$mdGesture', function() {
       });
     }));
 
+
+    it('should clean up styles when de-registered', inject(function($mdGesture, $document) {
+      deRegisterEvents();
+      // Ensure that no 'pan-x' or 'pan-y' values are left behind.
+      expect(el[0].style[touchAction]).toBe('');
+    }));
   });
 
   describe('swipe', function() {

src/core/util/util.js

@@ -965,7 +965,20 @@ function UtilFactory($document, $timeout, $compile, $rootScope, $$mdAnimate, $in
      * documentMode is an IE-only property
      * http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85).aspx
      */
-    msie: window.document.documentMode
+    msie: window.document.documentMode,
+
+    getTouchAction: function() {
+      var testEl = document.createElement('div');
+      var vendorPrefixes = ['', 'webkit', 'Moz', 'MS', 'ms', 'o'];
+
+      for (var i = 0; i < vendorPrefixes.length; i++) {
+        var prefix = vendorPrefixes[i];
+        var property = prefix ? prefix + 'TouchAction' : 'touchAction';
+        if (angular.isDefined(testEl.style[property])) {
+          return property;
+        }
+      }
+    }
   };
 
   // Instantiate other namespace utility methods