ui5-tabcontainer: inserting new selected tab shows two selected tabs

[JarrettChan]

Bug Description

For our component with a ui5-tabcontainer in hbs When a new ui5-tab is inserted selected and the existing ui5-tab is un-selected In ui5-tabcontainer onBeforeRendering, this.alltems has not picked up the new slotted element yet. So, it sees no selected ui5-tab, then by default applies _selected to the first item After the new selected ui5-tab is rendered Then I see both the _selected tab and the selected tab

Expected Behavior

There shouldn't be multiple selected tabs if I insert a new ui5-tab as selected and un-selected the rest.

Isolated Example

I can't replicate the way that our component inserts and updates the tabs, but can reach a similar result by initially having no selected tab and try to insert a tab with selected. https://codesandbox.io/s/ui5-webcomponents-forked-ps3owo

Context

• UI5 Web Components version: 1.7.1
• OS/Platform: macOS 12.5
• Browser: Chrome 106.0.5249.103 (Official Build) (x86_64)
• Affected component: ui5-tabcontainer

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: SuccessFactors

[Todor-ads]

Hello @SAP/ui5-webcomponents-topic-rd , please look into this issue in TabContainer.

Regards, Todor