fix reference error in pfe-navigation when slot is missing (#695)

* fix reference error when search slot is missing

* run prettier on nav, somehow it was missed

* update changelog

* Update CHANGELOG-prerelease.md

Co-Authored-By: [ Cassondra ] <[email protected]>

Co-authored-by: [ Cassondra ] <[email protected]>

Author: mwcz

CHANGELOG-prerelease.md

@@ -1,3 +1,9 @@
+## Prerelease 37 ( TBD )
+
+Tag: [v1.0.0-prerelease.37](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.37)
+
+- [27aa87d3](https://github.com/patternfly/patternfly-elements/commit/082467) fix: reference error when slot is missing in pfe-navigation
+
 ## Prerelease 36 ( 2020-01-20 )
 
 Tag: [v1.0.0-prerelease.36](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.36)

elements/pfe-navigation/src/pfe-navigation.js

@@ -66,11 +66,17 @@ class PfeNavigation extends PFElement {
     // Capture shadow elements
     this._overlay = this.shadowRoot.querySelector(`.${this.tag}__overlay`);
     this._wrapper = this.shadowRoot.querySelector(`.${this.tag}__wrapper`);
-    this._menuItem = this.shadowRoot.querySelector(`${PfeNavigationItem.tag}[pfe-icon="web-mobile-menu"]`);
+    this._menuItem = this.shadowRoot.querySelector(
+      `${PfeNavigationItem.tag}[pfe-icon="web-mobile-menu"]`
+    );
 
     this._slots = {
-      language: this.shadowRoot.querySelector(`${PfeNavigationItem.tag}[pfe-icon="web-user"]`),
-      login: this.shadowRoot.querySelector(`${PfeNavigationItem.tag}[pfe-icon="web-globe"]`)
+      language: this.shadowRoot.querySelector(
+        `${PfeNavigationItem.tag}[pfe-icon="web-user"]`
+      ),
+      login: this.shadowRoot.querySelector(
+        `${PfeNavigationItem.tag}[pfe-icon="web-globe"]`
+      )
     };
 
     // Initialize active navigation item to empty array
@@ -79,7 +85,9 @@ class PfeNavigation extends PFElement {
 
     // make sure we close all of the nav items and hide the overlay when
     // the mobile menu button is closed
-    this._menuItem.shadowRoot.querySelector(".pfe-navigation-item__trigger").addEventListener("click", this._menuItemClickHandler);
+    this._menuItem.shadowRoot
+      .querySelector(".pfe-navigation-item__trigger")
+      .addEventListener("click", this._menuItemClickHandler);
 
     // make sure we close all of the nav items and hide the overlay
     // when it's clicked
@@ -98,7 +106,7 @@ class PfeNavigation extends PFElement {
         // If only one value exists in the array, it starts at that size and goes up
         this.breakpoints = {
           main: [0, 1023], // visible from 0 - 1200px
-          search: [640],   // visible from 768px +
+          search: [640], // visible from 768px +
           "mobile-search": [0, 639],
           language: [640],
           "mobile-language": [0, 639],
@@ -112,7 +120,9 @@ class PfeNavigation extends PFElement {
         // Watch for screen resizing
         window.addEventListener("resize", this._resizeHandler);
       } else {
-        console.error("This component does not have any light DOM children.  Please check documentation for requirements.");
+        console.error(
+          "This component does not have any light DOM children.  Please check documentation for requirements."
+        );
       }
 
       this._observer.observe(this, { childList: true });
@@ -123,15 +133,23 @@ class PfeNavigation extends PFElement {
     // Remove the scroll, resize, and outside click event listeners
     window.removeEventListener("resize", this._resizeHandler);
 
-    if(this.hasAttribute("pfe-close-on-click") && this.getAttribute("pfe-close-on-click") === "external") {
+    if (
+      this.hasAttribute("pfe-close-on-click") &&
+      this.getAttribute("pfe-close-on-click") === "external"
+    ) {
       document.removeEventListener("click", this._outsideListener);
     }
 
-    if(this.hasAttribute("pfe-sticky") && this.getAttribute("pfe-sticky") != "false") {
+    if (
+      this.hasAttribute("pfe-sticky") &&
+      this.getAttribute("pfe-sticky") != "false"
+    ) {
       window.removeEventListener("scroll", this._stickyHandler);
     }
 
-    this._menuItem.shadowRoot.querySelector(".pfe-navigation-item__trigger").removeEventListener("click", this._menuItemClickHandler);
+    this._menuItem.shadowRoot
+      .querySelector(".pfe-navigation-item__trigger")
+      .removeEventListener("click", this._menuItemClickHandler);
     this._overlay.removeEventListener("click", this._overlayClickHandler);
 
     this._observer.disconnect();
@@ -146,11 +164,16 @@ class PfeNavigation extends PFElement {
       // If the item is open but not visible, update it to hidden
       if (item.expanded && !item.visible) {
         item.expanded = false;
-        this._activeNavigationItems = this._activeNavigationItems.filter(i => i !== item);
+        this._activeNavigationItems = this._activeNavigationItems.filter(
+          i => i !== item
+        );
       } else if (item.expanded && item.parent && item.parent.visible) {
         // if the parent is the mobile menu item and the size of the window is within
         // the main breakpoint, make sure that the mobile menu is expanded
-        if (item.parent === this._menuItem && window.innerWidth <= this.breakpoints.main[1]) {
+        if (
+          item.parent === this._menuItem &&
+          window.innerWidth <= this.breakpoints.main[1]
+        ) {
           item.parent.expanded = true; // Ensure the parent is open
           // If the parent item doesn't exist in the active array, add it
           if (!this._activeNavigationItems.includes(item.parent)) {
@@ -164,7 +187,7 @@ class PfeNavigation extends PFElement {
   }
 
   _stickyHandler() {
-    if(window.pageYOffset >= this.top) {
+    if (window.pageYOffset >= this.top) {
       this.classList.add("pfe-sticky");
     } else {
       this.classList.remove("pfe-sticky");
@@ -176,7 +199,9 @@ class PfeNavigation extends PFElement {
     let isSelf = event.target === this;
     // Check if the clicked element contains or is contained by the navigation element
     let isChild = event.target.closest("pfe-navigation");
-    let insideWrapper = event.target.tagName.includes("-") ? event.target.shadowRoot.querySelector("pfe-navigation") : null;
+    let insideWrapper = event.target.tagName.includes("-")
+      ? event.target.shadowRoot.querySelector("pfe-navigation")
+      : null;
 
     // Check states to determine if the navigation items should close
     if (!isSelf && !(isChild || insideWrapper)) {
@@ -192,13 +217,17 @@ class PfeNavigation extends PFElement {
       let isVisible = false;
 
       // If the slot exists, set attribute based on supported breakpoints
-      if (this.slots[label] && this.slots[label].nodes.length > 0) {
+      if (
+        this.slots[label] &&
+        this.slots[label].nodes &&
+        this.slots[label].nodes.length > 0
+      ) {
         if (width >= start && (!end || (end && width <= end))) {
           isVisible = true;
         }
 
         this.slots[label].nodes.forEach(node => {
-          switch(label) {
+          switch (label) {
             case "main":
               if (isVisible) {
                 node.removeAttribute("show_content");
@@ -209,25 +238,29 @@ class PfeNavigation extends PFElement {
                 this._menuItem.expanded = false;
                 this._menuItem.tray.removeAttribute("hidden");
                 // Remove menuItem from active items
-                this._activeNavigationItems = this._activeNavigationItems.filter(item => item !== this._menuItem);
+                this._activeNavigationItems = this._activeNavigationItems.filter(
+                  item => item !== this._menuItem
+                );
               }
               node.navItems.forEach(item => {
                 if (isVisible) {
                   item.removeAttribute("parent_hidden");
-                 } else {
-                   item.setAttribute("parent_hidden", "");
-                 }
-                });
+                } else {
+                  item.setAttribute("parent_hidden", "");
+                }
+              });
               break;
             case (label.match(/^mobile/) || {}).input:
               if (isVisible) {
                 // Set an attribute to show this region (strip the mobile prefix)
                 this._menuItem.setAttribute(`show_${label.slice(7)}`, "");
-                if (this._slots[label.slice(7)]) this._slots[label.slice(7)].removeAttribute("hidden");
+                if (this._slots[label.slice(7)])
+                  this._slots[label.slice(7)].removeAttribute("hidden");
                 node.removeAttribute("hidden");
               } else {
                 this._menuItem.removeAttribute(`show_${label.slice(7)}`);
-                if (this._slots[label.slice(7)]) this._slots[label.slice(7)].setAttribute("hidden", "");
+                if (this._slots[label.slice(7)])
+                  this._slots[label.slice(7)].setAttribute("hidden", "");
                 node.setAttribute("hidden", "");
               }
               break;
@@ -273,7 +306,10 @@ class PfeNavigation extends PFElement {
     this._setVisibility(this.offsetWidth);
 
     // If the nav is set to sticky, inject the height of the nav to the next element in the DOM
-    if(this.hasAttribute("pfe-sticky") && this.getAttribute("pfe-sticky") != "false") {
+    if (
+      this.hasAttribute("pfe-sticky") &&
+      this.getAttribute("pfe-sticky") != "false"
+    ) {
       // Run the sticky check on first page load
       this._stickyHandler();
 
@@ -282,7 +318,10 @@ class PfeNavigation extends PFElement {
     }
 
     // Listen for clicks outside the navigation element
-    if(this.hasAttribute("pfe-close-on-click") && this.getAttribute("pfe-close-on-click") === "external") {
+    if (
+      this.hasAttribute("pfe-close-on-click") &&
+      this.getAttribute("pfe-close-on-click") === "external"
+    ) {
       document.addEventListener("click", this._outsideListener);
     }