Merge pull request #189 from US-CBP/bugfix/tabs-selected-error

bugfix/tabs-selected-error
US-CBP · Aug 27, 2024 · c02218f · c02218f
2 parents 1fb09d2 + 73137a5
commit c02218f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 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
@@ -9,24 +9,22 @@ 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;
 
   /** Supports adding inline styles as an object */
   @Prop() sx: any = {};
 
-
   componentWillLoad() {
     if (typeof this.sx == 'string') {
       this.sx = JSON.parse(this.sx) || {};
     }
     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
@@ -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
@@ -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;