From 89ad4f3cfc7fe8fb2e1147ac2455a1d1f07cd84f Mon Sep 17 00:00:00 2001
From: Will Ernest <williamernest@google.com>
Date: Wed, 29 Aug 2018 15:02:23 -0700
Subject: [PATCH] fix(drawer): Destroy list in destroy method

---
 packages/mdc-drawer/index.js            | 16 +++++++++++++---
 test/unit/mdc-drawer/mdc-drawer.test.js | 16 ++++++++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/mdc-drawer/index.js b/packages/mdc-drawer/index.js
index 631c498d7f6..46193333cf6 100644
--- a/packages/mdc-drawer/index.js
+++ b/packages/mdc-drawer/index.js
@@ -61,6 +61,9 @@ class MDCDrawer extends MDCComponent {
 
     /** @private {?Function} */
     this.handleScrimClick_;
+
+    /** @prviate {MDCList} */
+    this.list_;
   }
 
   /**
@@ -92,10 +95,13 @@ class MDCDrawer extends MDCComponent {
   }
 
   initialize(
-    focusTrapFactory = createFocusTrap) {
+    focusTrapFactory = createFocusTrap,
+    listFactory = (el) => new MDCList(el)) {
     const listEl = /** @type {!Element} */ (this.root_.querySelector(`.${MDCListFoundation.cssClasses.ROOT}`));
-    const list = MDCList.attachTo(listEl);
-    list.wrapFocus = true;
+    if (listEl) {
+      this.list_ = listFactory(listEl);
+      this.list_.wrapFocus = true;
+    }
     this.focusTrapFactory_ = focusTrapFactory;
   }
 
@@ -121,6 +127,10 @@ class MDCDrawer extends MDCComponent {
     this.root_.removeEventListener('keydown', this.handleKeydown_);
     this.root_.removeEventListener('transitionend', this.handleTransitionEnd_);
 
+    if (this.list_) {
+      this.list_.destroy();
+    }
+
     const {MODAL} = MDCDismissibleDrawerFoundation.cssClasses;
     if (this.root_.classList.contains(MODAL)) {
       this.scrim_.removeEventListener('click', /** @type {!Function} */ (this.handleScrimClick_));
diff --git a/test/unit/mdc-drawer/mdc-drawer.test.js b/test/unit/mdc-drawer/mdc-drawer.test.js
index 2d843d9406b..ffae01d2a1b 100644
--- a/test/unit/mdc-drawer/mdc-drawer.test.js
+++ b/test/unit/mdc-drawer/mdc-drawer.test.js
@@ -71,8 +71,13 @@ function setupTestWithMocks(variantClass = cssClasses.DISMISSIBLE) {
     activate: () => {},
     deactivate: () => {},
   });
-  const component = new MDCDrawer(drawer, mockFoundation, () => mockFocusTrapInstance);
-  return {root, drawer, component, mockFoundation, mockFocusTrapInstance};
+  const mockList = td.object({
+    wrapFocus: () => {},
+    destroy: () => {},
+  });
+
+  const component = new MDCDrawer(drawer, mockFoundation, () => mockFocusTrapInstance, () => mockList);
+  return {root, drawer, component, mockFoundation, mockFocusTrapInstance, mockList};
 }
 
 suite('MDCDrawer');
@@ -134,6 +139,13 @@ test('#destroy removes transitionend event listener', () => {
   td.verify(mockFoundation.handleTransitionEnd(td.matchers.isA(Object)), {times: 0});
 });
 
+test('#destroy calls destroy on list', () => {
+  const {component, mockList} = setupTestWithMocks();
+  component.destroy();
+
+  td.verify(mockList.destroy(), {times: 1});
+});
+
 test('adapter#addClass adds class to drawer', () => {
   const {component, drawer} = setupTest();
   component.getDefaultFoundation().adapter_.addClass('test-class');