Merge pull request #97 from github/ensure_tabs_available

Ensure tabs are available before selecting

.tool-versions

@@ -0,0 +1 @@
+nodejs 22.3.0

custom-elements.json

@@ -437,6 +437,9 @@
               "kind": "field",
               "name": "#tabList",
               "privacy": "private",
+              "type": {
+                "text": "HTMLElement"
+              },
               "readonly": true
             },
             {

src/tab-container-element.ts

@@ -109,7 +109,7 @@ export class TabContainerElement extends HTMLElement {
 
   static observedAttributes = ['vertical']
 
-  get #tabList() {
+  get #tabList(): HTMLElement {
     const wrapper = this.querySelector('[slot=tablist-wrapper]')
     if (wrapper?.closest(this.tagName) === this) {
       return wrapper.querySelector('[role=tablist]') as HTMLElement
@@ -221,7 +221,18 @@ export class TabContainerElement extends HTMLElement {
     this.addEventListener('click', this)
 
     this.selectTab(-1)
-    this.#setupComplete = true
+
+    if (!this.#setupComplete) {
+      const mutationObserver = new MutationObserver(() => {
+        this.selectTab(-1)
+
+        if (this.#setupComplete) {
+          mutationObserver.disconnect()
+        }
+      })
+
+      mutationObserver.observe(this, {childList: true, subtree: true})
+    }
   }
 
   attributeChangedCallback(name: string) {
@@ -356,7 +367,7 @@ export class TabContainerElement extends HTMLElement {
      * Out of bounds index
      */
     if (index > tabs.length - 1) {
-      throw new RangeError(`Index "${index}" out of bounds`)
+      return
     }
 
     const selectedTab = tabs[index]
@@ -401,5 +412,7 @@ export class TabContainerElement extends HTMLElement {
         }),
       )
     }
+
+    this.#setupComplete = true
   }
 }

test/test.js

@@ -339,11 +339,9 @@ describe('tab-container', function () {
     })
 
     it('result in noop, when selectTab receives out of bounds index', function () {
-      assert.throws(() => tabContainer.selectTab(3), 'Index "3" out of bounds')
-
-      tabContainer.selectTab(2)
-      assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
-      assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
+      tabContainer.selectTab(3)
+      assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
+      assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
     })
   })