fix(drawer): Always remove overlay when drawer is swiped to close (#555)

material-components · May 8, 2017 · 95dbcd0 · 95dbcd0
1 parent 7764c19
commit 95dbcd0
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/packages/mdc-drawer/slidable/foundation.js b/packages/mdc-drawer/slidable/foundation.js
@@ -184,9 +184,8 @@ export class MDCSlidableDrawerFoundation extends MDCFoundation {
     this.drawerWidth_ = this.adapter_.getDrawerWidth();
     this.startX_ = evt.touches ? evt.touches[0].pageX : evt.pageX;
     this.currentX_ = this.startX_;
-    this.touchingSideNav_ = true;
 
-    requestAnimationFrame(this.updateDrawer_.bind(this));
+    this.updateRaf_ = requestAnimationFrame(this.updateDrawer_.bind(this));
   }
 
   handleTouchMove_(evt) {
@@ -214,16 +213,12 @@ export class MDCSlidableDrawerFoundation extends MDCFoundation {
   }
 
   prepareForTouchEnd_() {
-    this.touchingSideNav_ = false;
+    cancelAnimationFrame(this.updateRaf_);
     this.adapter_.setTranslateX(null);
   }
 
   updateDrawer_() {
-    if (!this.touchingSideNav_) {
-      return;
-    }
-
-    requestAnimationFrame(this.updateDrawer_.bind(this));
+    this.updateRaf_ = requestAnimationFrame(this.updateDrawer_.bind(this));
     this.adapter_.setTranslateX(this.newPosition_);
   }
 

diff --git a/test/unit/mdc-drawer/slidable.foundation.test.js b/test/unit/mdc-drawer/slidable.foundation.test.js
@@ -460,6 +460,28 @@ test('on touch end resets touch update styles', () => {
   raf.restore();
 });
 
+test('on touch end does not update drawer', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const drawerHandlers = captureHandlers(mockAdapter, 'registerDrawerInteractionHandler');
+  const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');
+  const raf = createMockRaf();
+  td.when(mockAdapter.hasClass('mdc-slidable-drawer--open')).thenReturn(true);
+  td.when(mockAdapter.getDrawerWidth()).thenReturn(500);
+  foundation.init();
+
+  drawerHandlers.touchstart({
+    touches: [{pageX: 500}],
+  });
+  raf.flush();
+  td.verify(mockAdapter.setTranslateX(0), {times: 1});
+
+  handlers.touchend({});
+  raf.flush();
+  td.verify(mockAdapter.setTranslateX(0), {times: 1});
+
+  raf.restore();
+});
+
 test('on touch end closes the drawer if moved more than 50% and sends close event', () => {
   const {foundation, mockAdapter} = setupTest();
   const drawerHandlers = captureHandlers(mockAdapter, 'registerDrawerInteractionHandler');

diff --git a/test/unit/mdc-drawer/temporary.foundation.test.js b/test/unit/mdc-drawer/temporary.foundation.test.js
@@ -290,6 +290,28 @@ test('on touch end resets touch update styles', () => {
   raf.restore();
 });
 
+test('on touch end does not update drawer', () => {
+  const {foundation, mockAdapter} = setupTest();
+  const drawerHandlers = captureHandlers(mockAdapter, 'registerDrawerInteractionHandler');
+  const handlers = captureHandlers(mockAdapter, 'registerInteractionHandler');
+  const raf = createMockRaf();
+  td.when(mockAdapter.hasClass('mdc-temporary-drawer--open')).thenReturn(true);
+  td.when(mockAdapter.getDrawerWidth()).thenReturn(500);
+  foundation.init();
+
+  drawerHandlers.touchstart({
+    touches: [{pageX: 500}],
+  });
+  raf.flush();
+  td.verify(mockAdapter.updateCssVariable(1), {times: 1});
+
+  handlers.touchend({});
+  raf.flush();
+  td.verify(mockAdapter.updateCssVariable(1), {times: 1});
+
+  raf.restore();
+});
+
 test('#isRootTransitioningEventTarget_ returns true if the element is the drawer element', () => {
   const {foundation, mockAdapter} = setupTest();