From 2c928279cce2c193684aa2538c3d48ce9251713c Mon Sep 17 00:00:00 2001
From: "Andrew C. Dvorak" <acdvorak@gmail.com>
Date: Tue, 16 Jan 2018 11:50:21 -0800
Subject: [PATCH] fix(demos): Fix NPEs in drawer demos (#1946)

To repro:

1. View the [Temporary Drawer demo page](https://material-components-web.appspot.com/drawer/temporary-drawer.html) in any browser
2. Open the dev tools
3. Open the drawer by clicking on the toolbar menu icon
4. Click on a blank part of the drawer (NOT on a list item)
---
 demos/drawer/permanent-drawer-above-toolbar.html | 4 ++--
 demos/drawer/permanent-drawer-below-toolbar.html | 4 ++--
 demos/drawer/persistent-drawer.html              | 4 ++--
 demos/drawer/temporary-drawer.html               | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/demos/drawer/permanent-drawer-above-toolbar.html b/demos/drawer/permanent-drawer-above-toolbar.html
index e13807db440..a0c8a884b7f 100644
--- a/demos/drawer/permanent-drawer-above-toolbar.html
+++ b/demos/drawer/permanent-drawer-above-toolbar.html
@@ -183,8 +183,8 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
       var activatedClass = 'mdc-list-item--selected';
       document.querySelector('.mdc-drawer').addEventListener('click', function(event) {
         var el = event.target;
-        while (!el.classList.contains('mdc-list-item') && el) {
-          el = el.parentNode;
+        while (el && !el.classList.contains('mdc-list-item')) {
+          el = el.parentElement;
         }
         if (el) {
           var activatedItem = document.querySelector('.' + activatedClass);
diff --git a/demos/drawer/permanent-drawer-below-toolbar.html b/demos/drawer/permanent-drawer-below-toolbar.html
index 01f8cd24569..8f858a3b05f 100644
--- a/demos/drawer/permanent-drawer-below-toolbar.html
+++ b/demos/drawer/permanent-drawer-below-toolbar.html
@@ -175,8 +175,8 @@ <h1 class="mdc-typography--display1">Permanent Drawer</h1>
       var activatedClass = 'mdc-list-item--selected';
       document.querySelector('.mdc-drawer').addEventListener('click', function(event) {
         var el = event.target;
-        while (!el.classList.contains('mdc-list-item') && el) {
-          el = el.parentNode;
+        while (el && !el.classList.contains('mdc-list-item')) {
+          el = el.parentElement;
         }
         if (el) {
           var activatedItem = document.querySelector('.' + activatedClass);
diff --git a/demos/drawer/persistent-drawer.html b/demos/drawer/persistent-drawer.html
index 01a9c55dd29..f9c52b9a730 100644
--- a/demos/drawer/persistent-drawer.html
+++ b/demos/drawer/persistent-drawer.html
@@ -165,8 +165,8 @@ <h1 class="mdc-typography--display1">Persistent Drawer</h1>
           var activatedClass = 'mdc-list-item--selected';
           document.querySelector('.mdc-drawer__drawer').addEventListener('click', function(event) {
             var el = event.target;
-            while (!el.classList.contains('mdc-list-item') && el) {
-              el = el.parentNode;
+            while (el && !el.classList.contains('mdc-list-item')) {
+              el = el.parentElement;
             }
             if (el) {
               var activatedItem = document.querySelector('.' + activatedClass);
diff --git a/demos/drawer/temporary-drawer.html b/demos/drawer/temporary-drawer.html
index 615cf139f1c..63f586dda57 100644
--- a/demos/drawer/temporary-drawer.html
+++ b/demos/drawer/temporary-drawer.html
@@ -149,8 +149,8 @@ <h1 class="mdc-typography--display1">Temporary Drawer</h1>
         var activatedClass = 'mdc-list-item--selected';
         document.querySelector('.mdc-drawer__drawer').addEventListener('click', function(event) {
           var el = event.target;
-          while (!el.classList.contains('mdc-list-item') && el) {
-            el = el.parentNode;
+          while (el && !el.classList.contains('mdc-list-item')) {
+            el = el.parentElement;
           }
           if (el) {
             var activatedItem = document.querySelector('.' + activatedClass);