From dffbcc138bf61c19371291b4b55269ffdc887aba Mon Sep 17 00:00:00 2001
From: Abhinay Omkar <abhiomkar@gmail.com>
Date: Thu, 31 Jan 2019 16:58:59 -0500
Subject: [PATCH] fix(drawer): Fix restore & release focus order when closing
 the drawer (#4304)

---
 packages/mdc-drawer/dismissible/foundation.js     |  2 +-
 packages/mdc-drawer/modal/foundation.js           |  1 -
 .../mdc-drawer/dismissible.foundation.test.js     | 15 +++++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/mdc-drawer/dismissible/foundation.js b/packages/mdc-drawer/dismissible/foundation.js
index fb6d537b065..06312238b49 100644
--- 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
index a3e45bec04f..99166faa33b 100644
--- 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
index 286abc5661f..aaaf71401b2 100644
--- 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']);
+});