fix(slider): Fix mobile Chrome by handling all "up" event types (#1484)

material-components · Oct 31, 2017 · bcc5ec5 · bcc5ec5
1 parent 4ef842b
commit bcc5ec5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/packages/mdc-slider/foundation.js b/packages/mdc-slider/foundation.js
@@ -30,6 +30,9 @@ const KEY_IDS = {
   PAGE_DOWN: 'PageDown',
 };
 
+// Events that can constitute the user releasing drag on a slider
+const UP_EVENTS = ['mouseup', 'pointerup', 'touchend'];
+
 export default class MDCSliderFoundation extends MDCFoundation {
   static get cssClasses() {
     return cssClasses;
@@ -97,10 +100,10 @@ export default class MDCSliderFoundation extends MDCFoundation {
     this.thumbContainerPointerHandler_ = () => {
       this.handlingThumbTargetEvt_ = true;
     };
-    this.mousedownHandler_ = this.createDownHandler_('mousemove', 'mouseup');
-    this.pointerdownHandler_ = this.createDownHandler_('pointermove', 'pointerup');
+    this.mousedownHandler_ = this.createDownHandler_('mousemove');
+    this.pointerdownHandler_ = this.createDownHandler_('pointermove');
     this.touchstartHandler_ = this.createDownHandler_(
-      'touchmove', 'touchend', ({targetTouches}) => targetTouches[0].pageX);
+      'touchmove', ({targetTouches}) => targetTouches[0].pageX);
     this.keydownHandler_ = (evt) => this.handleKeydown_(evt);
     this.focusHandler_ = () => this.handleFocus_();
     this.blurHandler_ = () => this.handleBlur_();
@@ -242,16 +245,19 @@ export default class MDCSliderFoundation extends MDCFoundation {
     }
   }
 
-  createDownHandler_(moveEvt, upEvt, getPageX = ({pageX}) => pageX) {
+  createDownHandler_(moveEvt, getPageX = ({pageX}) => pageX) {
     const moveHandler = (evt) => {
       evt.preventDefault();
       this.setValueFromEvt_(evt, getPageX);
     };
 
+    // Note: upHandler is [de]registered on ALL potential pointer-related release event types, since some browsers
+    // do not always fire these consistently in pairs.
+    // (See https://github.com/material-components/material-components-web/issues/1192)
     const upHandler = () => {
       this.setActive_(false);
       this.adapter_.deregisterBodyInteractionHandler(moveEvt, moveHandler);
-      this.adapter_.deregisterBodyInteractionHandler(upEvt, upHandler);
+      UP_EVENTS.forEach((type) => this.adapter_.deregisterBodyInteractionHandler(type, upHandler));
       this.adapter_.notifyChange();
     };
 
@@ -267,7 +273,7 @@ export default class MDCSliderFoundation extends MDCFoundation {
       this.setActive_(true);
 
       this.adapter_.registerBodyInteractionHandler(moveEvt, moveHandler);
-      this.adapter_.registerBodyInteractionHandler(upEvt, upHandler);
+      UP_EVENTS.forEach((type) => this.adapter_.registerBodyInteractionHandler(type, upHandler));
       this.setValueFromEvt_(evt, getPageX);
     };
 

diff --git a/test/unit/mdc-slider/foundation-pointer-events.test.js b/test/unit/mdc-slider/foundation-pointer-events.test.js
@@ -182,7 +182,7 @@ function createTestSuiteForPointerEvents(downEvt, moveEvt, upEvt, pageXObj = (pa
     raf.restore();
   });
 
-  test(`on ${downEvt} attaches event handlers for ${moveEvt} and ${upEvt} events to the document body`, () => {
+  test(`on ${downEvt} attaches event handlers for ${moveEvt} and all *up/end events to the document body`, () => {
     const {foundation, mockAdapter, raf, rootHandlers} = setupTest();
     const {isA} = td.matchers;
 
@@ -194,8 +194,9 @@ function createTestSuiteForPointerEvents(downEvt, moveEvt, upEvt, pageXObj = (pa
     raf.flush();
 
     td.verify(mockAdapter.registerBodyInteractionHandler(moveEvt, isA(Function)));
-    td.verify(mockAdapter.registerBodyInteractionHandler(upEvt, isA(Function)));
-
+    td.verify(mockAdapter.registerBodyInteractionHandler('mouseup', isA(Function)));
+    td.verify(mockAdapter.registerBodyInteractionHandler('pointerup', isA(Function)));
+    td.verify(mockAdapter.registerBodyInteractionHandler('touchend', isA(Function)));
     raf.restore();
   });
 
@@ -317,7 +318,7 @@ function createTestSuiteForPointerEvents(downEvt, moveEvt, upEvt, pageXObj = (pa
     raf.restore();
   });
 
-  test(`on body ${upEvt} removes the ${moveEvt} and ${upEvt} event handlers from the document body`, () => {
+  test(`on body ${upEvt} removes the ${moveEvt} and all *up/end event handlers from the document body`, () => {
     const {foundation, mockAdapter, raf, rootHandlers, bodyHandlers} = setupTest();
     const {isA} = td.matchers;
 
@@ -330,7 +331,9 @@ function createTestSuiteForPointerEvents(downEvt, moveEvt, upEvt, pageXObj = (pa
     bodyHandlers[upEvt]();
 
     td.verify(mockAdapter.deregisterBodyInteractionHandler(moveEvt, isA(Function)));
-    td.verify(mockAdapter.deregisterBodyInteractionHandler(upEvt, isA(Function)));
+    td.verify(mockAdapter.deregisterBodyInteractionHandler('mouseup', isA(Function)));
+    td.verify(mockAdapter.deregisterBodyInteractionHandler('pointerup', isA(Function)));
+    td.verify(mockAdapter.deregisterBodyInteractionHandler('touchend', isA(Function)));
 
     raf.restore();
   });