fix(drawer): Fix restore & release focus order when closing the drawer (

#4304)
material-components · Jan 31, 2019 · dffbcc1 · dffbcc1
1 parent 58c3b4d
commit dffbcc1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/packages/mdc-drawer/dismissible/foundation.js b/packages/mdc-drawer/dismissible/foundation.js
@@ -168,8 +168,8 @@ class MDCDismissibleDrawerFoundation extends MDCFoundation {
 
     if (this.isClosing()) {
       this.adapter_.removeClass(OPEN);
-      this.adapter_.restoreFocus();
       this.closed();
+      this.adapter_.restoreFocus();
       this.adapter_.notifyClose();
     } else {
       this.adapter_.focusActiveNavigationItem();

diff --git a/packages/mdc-drawer/modal/foundation.js b/packages/mdc-drawer/modal/foundation.js
@@ -21,7 +21,6 @@
  * THE SOFTWARE.
  */
 
-import MDCDrawerAdapter from '../adapter';
 import MDCDismissibleDrawerFoundation from '../dismissible/foundation';
 
 /**

diff --git a/test/unit/mdc-drawer/dismissible.foundation.test.js b/test/unit/mdc-drawer/dismissible.foundation.test.js
@@ -273,3 +273,18 @@ test('#handleTransitionEnd doesn\'t do anything if event is emitted with a non-e
   td.verify(mockAdapter.notifyOpen(), {times: 0});
   td.verify(mockAdapter.notifyClose(), {times: 0});
 });
+
+test('#handleTransitionEnd calls .closed() before restoring the focus.', () => {
+  const {foundation, mockAdapter} = setupTest();
+  foundation.closed = td.function();
+
+  const mockEventTarget = bel`<div class="foo">bar</div>`;
+  td.when(mockAdapter.elementHasClass(mockEventTarget, cssClasses.ROOT)).thenReturn(true);
+  td.when(mockAdapter.hasClass(cssClasses.CLOSING)).thenReturn(true);
+  const executionOrder = [];
+  td.when(foundation.closed()).thenDo(() => executionOrder.push('closed'));
+  td.when(mockAdapter.restoreFocus()).thenDo(() => executionOrder.push('restoreFocus'));
+  foundation.handleTransitionEnd({target: mockEventTarget});
+
+  assert.deepEqual(executionOrder, ['closed', 'restoreFocus']);
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,6 @@ @@
      * THE SOFTWARE.
      */
-    import MDCDrawerAdapter from '../adapter';
     import MDCDismissibleDrawerFoundation from '../dismissible/foundation';
     /**
@@ Expand Down @@