From 73137a57f1514a754951c19fdc6346774bf4e4f6 Mon Sep 17 00:00:00 2001
From: Doug Gibson <email@dgibson.net>
Date: Tue, 27 Aug 2024 15:25:45 -0400
Subject: [PATCH] Fix console error on tabs when a tab is marked selected
 initially.

---
 .../src/components/cbp-tab-panel/cbp-tab-panel.tsx         | 7 ++-----
 packages/web-components/src/components/cbp-tab/cbp-tab.tsx | 2 +-
 .../web-components/src/components/cbp-tabs/cbp-tabs.tsx    | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/components/cbp-tab-panel/cbp-tab-panel.tsx b/packages/web-components/src/components/cbp-tab-panel/cbp-tab-panel.tsx
index 93d5806d..ac58f420 100644
--- a/packages/web-components/src/components/cbp-tab-panel/cbp-tab-panel.tsx
+++ b/packages/web-components/src/components/cbp-tab-panel/cbp-tab-panel.tsx
@@ -9,8 +9,8 @@ export class CbpTabPanel {
   
   @Element() host: HTMLElement;
 
-  /** An `ID`-conformant unique name of the tab; This value should match the corresponding cbp-tab-panel name and links the two together. */
-  @Prop() name: string;
+  /** An `ID`-conformant unique name of the tab-panel, applied as an `id` on this tab panel; This value should match the corresponding cbp-tab name and links the two together. */
+  @Prop() name!: string;
 
   /** Specifies if this is the tab panel corresponding to the selected tab and currently visible. This property is managed by the parent cbp-tabs component and does not need to be set manually. */
   @Prop({ reflect: true }) selected: boolean;
@@ -18,7 +18,6 @@ export class CbpTabPanel {
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 
-
   componentWillLoad() {
     if (typeof this.sx == 'string') {
       this.sx = JSON.parse(this.sx) || {};
@@ -26,7 +25,6 @@ export class CbpTabPanel {
     setCSSProps(this.host, Object.assign({}, this.sx));
   }
 
-
   render() {
     return (
       <Host
@@ -38,5 +36,4 @@ export class CbpTabPanel {
       </Host>
     );
   }
-
 }
diff --git a/packages/web-components/src/components/cbp-tab/cbp-tab.tsx b/packages/web-components/src/components/cbp-tab/cbp-tab.tsx
index acb73cc4..16db29cb 100644
--- a/packages/web-components/src/components/cbp-tab/cbp-tab.tsx
+++ b/packages/web-components/src/components/cbp-tab/cbp-tab.tsx
@@ -18,6 +18,7 @@ export class CbpTab {
   /** Specifies whether this is the selected tab. Only one tab per tabset should be marked as selected.*/
   @Prop({ reflect: true }) selected: boolean;
 
+  /** An optional color variant. */
   @Prop({ reflect: true }) color: 'danger';
 
   /** For tabs without a visible text label (e.g., icon tabs) or a label that is insufficiently unique/descriptive, you may provide accessibility text, which is rendered as an `aria-label` on the tab control (button element). */
@@ -78,5 +79,4 @@ export class CbpTab {
       </Host>
     );
   }
-
 }
diff --git a/packages/web-components/src/components/cbp-tabs/cbp-tabs.tsx b/packages/web-components/src/components/cbp-tabs/cbp-tabs.tsx
index f5060702..f1b4a872 100644
--- a/packages/web-components/src/components/cbp-tabs/cbp-tabs.tsx
+++ b/packages/web-components/src/components/cbp-tabs/cbp-tabs.tsx
@@ -41,7 +41,7 @@ export class CbpTabs {
   setActiveTab(activatedTab) {
     this.tabs.forEach((tab: HTMLCbpTabElement, index) => {
       let button = tab.querySelector('button');
-      let panelid = button.getAttribute('aria-controls');
+      let panelid = tab.name;
       let panel: HTMLCbpTabPanelElement = document.querySelector(`#${panelid}`);
 
       if (!panel) {
@@ -53,7 +53,7 @@ export class CbpTabs {
         tab.selected = true;
         this.selectedIndex = this.focusIndex = index;
         panel.selected = true;
-        button.scrollIntoView({ behavior: "smooth", inline: 'start' });
+        button?.scrollIntoView({ behavior: "smooth", inline: 'start' }); // Do nothing if the button hasn't been fully rendered yet - this is desired behavior on initial load.
       } else {
         tab.selected = false;
         panel.selected = false;