Re render TabGroup after dynamically adding tabs

[Wolfy18]

Hello, I'm wondering if there's a way to re initiate the TabGroup after adding tabs dynamically by an user event. The tabs are being created and if I add 20 tabs on-load everything is fine, the tab group is scrollable. The problem comes when the user needs to add more tabs by clicking a button and the TabGroup is not scrollable when its first rendered.

[claviska]

I converted this issue to a discussion, but after rereading it I'm wondering if it is in fact a bug. Could you provide a repro so I can determine if this is something that needs to be fixed in the component or something that's working as intended?

[Wolfy18]

Oh I see makes sense. Well I’ll paste something here later today but Im sure I’m not doing something out of the ordinary.

I first create the tab and panel nodes using a template, and then I’m appending these nodes to the tab group using .appendChild() which works fine. Tabs and panels react as they should. The problem comes when the user adds more tabs from what it can be shown and the tabGroup does not activate its scrollable feature.

The scrollable feature does work when a lot of tabs are preloaded into a render function, although we need to automatically change to a scrollable tabgroup if more tabs are added later on.

[Wolfy18]

Wow! I realized that the issue is that the arrows aren’t showing! Lol That’s crazy. I mean, a person just like me won’t necessarily think about scrolling sideways unless they see a signifier like the arrow.

[Wolfy18]

return html`
      <sl-tab-group>
        <sl-tab slot="nav" panel="0">Primary Asset</sl-tab>

        <sl-tab-panel name="0">
          <div style="text-align: left; padding-top:1rem">
            <bk-asset-form .index=${0}></bk-asset-form>
          </div>
        </sl-tab-panel>
      </sl-tab-group>

    <template id="asset-template">
      <sl-tab slot="nav" panel="__prefix__" closable>
        Asset #__prefix__
      </sl-tab>

      <sl-tab-panel name="__prefix__">
        <div style="text-align: left; padding-top:1rem">
          <bk-asset-form></bk-asset-form>
        </div>
      </sl-tab-panel>
    </template>
    `

    const template = this.shadowRoot
      .querySelector('#asset-template')
      .cloneNode(true);

    const tabGroup = this.shadowRoot.querySelector('sl-tab-group');
    
    if (tabGroup) {
      
      const indx = [...tabGroup.children].filter(
        i => i.tagName.toLowerCase() === 'sl-tab'
      ).length;
      
      template.innerHTML = template.innerHTML.replace(/__prefix__/g, indx);
      
      const newNode = template.content.cloneNode(true);
      
      tabGroup.appendChild(newNode);
    }

[claviska]

I attempted to reproduce this with a similar CodePen but everything seems to be working as expected.

https://codepen.io/claviska/pen/mdxJERo?editors=1010