fix: removing stopPropagation from pfe-tabs click and keydown events (#817)

* fix: removing stopPropagation from pfe-tabs click and keydown events

Fixes #816

* updating the changelog

Author: kylebuch8

CHANGELOG-prerelease.md

@@ -1,3 +1,9 @@
+## Prerelease 43 ( TBD )
+
+Tag: [v1.0.0-prerelease.43](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.43)
+
+- []() fix: removing stopPropagation from pfe-tabs click and keydown events #817
+
 ## Prerelease 42 ( 2020-03-31 )
 
 Tag: [v1.0.0-prerelease.42](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.42)

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

@@ -388,9 +388,10 @@ class PfeTabs extends PFElement {
   }
 
   _onKeyDown(event) {
-    event.stopPropagation();
+    const tabs = this._allTabs();
+    const foundTab = tabs.find(tab => tab === event.target);
 
-    if (event.target.getAttribute("role") !== "tab") {
+    if (!foundTab) {
       return;
     }
 
@@ -430,13 +431,14 @@ class PfeTabs extends PFElement {
   }
 
   _onClick(event) {
-    event.stopPropagation();
+    const tabs = this._allTabs();
+    const foundTab = tabs.find(tab => tab === event.target);
 
-    if (event.currentTarget.getAttribute("role") !== "tab") {
+    if (!foundTab) {
       return;
     }
 
-    this.selectedIndex = this._getTabIndex(event.currentTarget);
+    this.selectedIndex = this._getTabIndex(foundTab);
   }
 
   _getTabIndexFromURL() {

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

@@ -125,14 +125,15 @@ <h2>Content 3</h2>
       <pfe-tab role="heading" slot="tab" pfe-id="historyTab2">Tab 1</pfe-tab>
       <pfe-tab-panel role="region" slot="panel">Content</pfe-tab-panel>
     </pfe-tabs>
-    
+
     <pfe-tabs id="tabs-in-tabs">
       <pfe-tab role="heading" slot="tab" id="tabs-in-tabs-1">Tab 1</pfe-tab>
       <pfe-tab-panel role="region" slot="panel">
         <pfe-tabs id="subtabset">
           <pfe-tab role="heading" slot="tab" id="subtab1">Sub Tab 1</pfe-tab>
           <pfe-tab-panel role="region" slot="panel">
             <h2>Content for Sub Tab 1</h2>
+            <button id="btn">Button</button>
           </pfe-tab-panel>
           <pfe-tab role="heading" slot="tab" id="subtab2">Sub Tab 2</pfe-tab>
           <pfe-tab-panel role="region" slot="panel" id="subtab2panel">
@@ -147,7 +148,7 @@ <h1>Tab 2 Content</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
       </pfe-tab-panel>
     </pfe-tabs>
-    
+
     <script>
       suite('<pfe-tabs>', () => {
         setup(() => {
@@ -416,12 +417,25 @@ <h1>Tab 2 Content</h1>
               flush(() => {
                 assert.equal(tabset2SubTab2.getAttribute('aria-selected'), 'true');
                 assert.isTrue(!tabset2SubTabPanel.hasAttribute('hidden'));
-                
+
                 done();
               });
             });
           });
         });
+
+        test("it should not stop events from inside tabs from propagating", () => {
+          const btn = document.querySelector("#btn");
+          const handlerSpy = sinon.spy();
+
+          document.addEventListener("click", handlerSpy);
+          btn.click();
+
+          const [event] = handlerSpy.getCall(0).args;
+          sinon.assert.calledOnce(handlerSpy);
+
+          document.removeEventListener("click", handlerSpy);
+        });
       });
 
       suite('<pfe-tabs> Tab History', () => {