fix: pfe-tabs - Issue 845 text added to tab or panel error (#846)

* fix: pfe-tabs check for tagName on addedNode mutation before continuing

Fixes #845

* pfe-tabs demo and changelog update

Author: kylebuch8

CHANGELOG-prerelease.md

@@ -1,3 +1,7 @@
+## Prerelese 46 ( TBD )
+
+- []() fix: pfe-tabs check for tagName on addedNode mutation before continuing
+
 ## Prerelese 45 ( 2020-04-27 )
 
 - [8dbea7b](https://github.com/patternfly/patternfly-elements/commit/8dbea7b5fbd94614d89828c27afafdcc287f016f) fix: typo in pfe-icon README (#840)

elements/pfe-tabs/demo/index.html

@@ -406,6 +406,29 @@ <h4>Tab 2</h4>
 
     </section>
 
+    <section class="example">
+      <h2 id="add-text-to-tab-and-panel">Dynamically Adding Text to Tab and Panel</h2>
+      <pfe-tabs id="dynamic-text">
+        <pfe-tab role="heading" slot="tab" id="dynamicTextTab">Tab 1</pfe-tab>
+        <pfe-tab-panel role="region" slot="panel" id="dynamicTextPanel">
+          <h4>Tab 1</h4>
+        </pfe-tab-panel>
+      </pfe-tabs>
+
+      <div>
+        <label>
+          Additional Tab Text
+          <input type="text" placeholder="Additional Tab Text" id="additional-tab-text">
+        </label>
+      </div>
+      <div>
+        <label>
+          Additional Panel Text
+          <input type="text" placeholder="Additional Panel Text" id="additional-panel-text">
+        </label>
+      </div>
+    </section>
+
     <script>
       var jumpLinksMenu = document.querySelector("#jump-links");
       var headings = document.querySelectorAll("section > h2[id]");
@@ -442,6 +465,19 @@ <h4>Tab 2</h4>
         fragment.appendChild(panel);
         pfeTabs.appendChild(fragment);
       });
+
+      var dynamicTextTab = document.querySelector("#dynamicTextTab");
+      var dynamicTextPanel = document.querySelector("#dynamicTextPanel")
+      var additionalTabTextInput = document.querySelector("#additional-tab-text");
+      var additionalPanelTextInput = document.querySelector("#additional-panel-text");
+
+      additionalTabTextInput.addEventListener("change", function (event) {
+        dynamicTextTab.innerHTML += event.target.value;
+      });
+
+      additionalPanelTextInput.addEventListener("change", function (event) {
+        dynamicTextPanel.innerHTML += event.target.value;
+      });
     </script>
   </body>
 </html>

elements/pfe-tabs/src/pfe-tabs.js

@@ -241,6 +241,10 @@ class PfeTabs extends PFElement {
       for (let mutation of mutationsList) {
         if (mutation.type === "childList" && mutation.addedNodes.length) {
           [...mutation.addedNodes].forEach(addedNode => {
+            if (!addedNode.tagName) {
+              return;
+            }
+
             if (
               addedNode.tagName.toLowerCase() === PfeTab.tag ||
               addedNode.tagName.toLowerCase() === PfeTabPanel.tag

elements/pfe-tabs/test/pfe-tabs_test.html

@@ -99,7 +99,7 @@ <h2>Content 3</h2>
 
     <pfe-tabs id="dynamic">
       <pfe-tab role="heading" slot="tab">Tab 1</pfe-tab>
-      <pfe-tab-panel role="region" slot="panel">Tab 1 Content</pfe-tab-panel>
+      <pfe-tab-panel role="region" slot="panel" id="dynamicTab1">Tab 1 Content</pfe-tab-panel>
     </pfe-tabs>
 
     <pfe-tabs id="initialVariant" pfe-variant="earth">
@@ -348,6 +348,9 @@ <h1>Tab 2 Content</h1>
           documentFragment.appendChild(newPanel);
           pfeAccordion.appendChild(documentFragment);
 
+          const dynamicTab1 = document.querySelector("#dynamicTab1");
+          dynamicTab1.innerHTML += "More text";
+
           flush(() => {
             const newTabElement = document.querySelector("#newTab");
             const newPanelElement = document.querySelector("#newPanel");