adding constructor fixes and name changes to pfe-tabs

Author: kylebuch8

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

@@ -140,6 +140,7 @@ class PfeTabs extends PFElement {
     this._linked = false;
 
     this._onSlotChange = this._onSlotChange.bind(this);
+    this._onClick = this._onClick.bind(this);
 
     this._tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
     this._panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
@@ -152,7 +153,7 @@ class PfeTabs extends PFElement {
     super.connectedCallback();
 
     this.addEventListener("keydown", this._onKeyDown);
-    this.addEventListener("click", this._onClick);
+    // this.addEventListener("click", this._onClick);
 
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", "tablist");
@@ -163,14 +164,14 @@ class PfeTabs extends PFElement {
     }
 
     Promise.all([
-      customElements.whenDefined(RhTab.tag),
-      customElements.whenDefined(RhTabPanel.tag)
+      customElements.whenDefined(PfeTab.tag),
+      customElements.whenDefined(PfeTabPanel.tag)
     ]).then(() => this._linkPanels());
   }
 
   disconnectedCallback() {
     this.removeEventListener("keydown", this._onKeyDown);
-    this.removeEventListener("click", this._onClick);
+    this._allTabs().forEach(tab => tab.removeEventListener("click", this._onClick))
   }
 
   attributeChangedCallback(attr, oldValue, newValue) {
@@ -203,8 +204,8 @@ class PfeTabs extends PFElement {
 
       case "selected-index":
         Promise.all([
-          customElements.whenDefined(RhTab.tag),
-          customElements.whenDefined(RhTabPanel.tag)
+          customElements.whenDefined(PfeTab.tag),
+          customElements.whenDefined(PfeTabPanel.tag)
         ]).then(() => {
           this._linkPanels();
           this.selectIndex(newValue);
@@ -265,6 +266,8 @@ class PfeTabs extends PFElement {
 
       tab.setAttribute("aria-controls", panel.id);
       panel.setAttribute("aria-labelledby", tab.id);
+
+      tab.addEventListener("click", this._onClick);
     });
 
     this._linked = true;
@@ -408,15 +411,15 @@ class PfeTabs extends PFElement {
   }
 
   _onClick(event) {
-    if (event.target.getAttribute("role") !== "tab") {
+    if (event.currentTarget.getAttribute("role") !== "tab") {
       return;
     }
 
-    this.selectedIndex = this._getTabIndex(event.target);
+    this.selectedIndex = this._getTabIndex(event.currentTarget);
   }
 }
 
-class RhTab extends PFElement {
+class PfeTab extends PFElement {
   static get tag() {
     return "pfe-tab";
   }
@@ -434,16 +437,16 @@ class RhTab extends PFElement {
   }
 
   constructor() {
-    super(RhTab);
-
-    if (!this.id) {
-      this.id = `${RhTab.tag}-${generateId()}`;
-    }
+    super(PfeTab);
   }
 
   connectedCallback() {
     super.connectedCallback();
 
+    if (!this.id) {
+      this.id = `${PfeTab.tag}-${generateId()}`;
+    }
+
     this.setAttribute("role", "tab");
     this.setAttribute("aria-selected", "false");
     this.setAttribute("tabindex", -1);
@@ -468,7 +471,7 @@ class RhTab extends PFElement {
   }
 }
 
-class RhTabPanel extends PFElement {
+class PfeTabPanel extends PFElement {
   static get tag() {
     return "pfe-tab-panel";
   }
@@ -482,23 +485,23 @@ class RhTabPanel extends PFElement {
   }
 
   constructor() {
-    super(RhTabPanel);
-
-    if (!this.id) {
-      this.id = `${RhTabPanel.tag}-${generateId()}`;
-    }
+    super(PfeTabPanel);
   }
 
   connectedCallback() {
     super.connectedCallback();
 
+    if (!this.id) {
+      this.id = `${PfeTabPanel.tag}-${generateId()}`;
+    }
+
     this.setAttribute("role", "tabpanel");
     this.setAttribute("tabindex", 0);
   }
 }
 
-PFElement.create(RhTab);
-PFElement.create(RhTabPanel);
+PFElement.create(PfeTab);
+PFElement.create(PfeTabPanel);
 PFElement.create(PfeTabs);
 
 export { PfeTabs as default };