ui5-webcomponents [TabContainer] Tab is collapsed by default

Describe the bug

We have a TabContainer with 2 tabs, all wrapped in a Dialog. With UI5WCv1.22.0/UI5WC4Rv1.25.1, the UI looks like this:

With UI5WCv1.23.1/UI5WC4Rv1.26.0, the UI looks like this:

Notice how Tab 1 is collapsed by default. To see the contents of Tab 1, I have to either collapse and re-expand Tab 1, or switch to Tab 2 and back to Tab 1. I didn't find anything in the changelog that could explain this change of behavior.

Thanks a lot in advance!

Isolated Example

Being unfamiliar with StackBlitz, I prefer sending you a modified App.tsx of your linked template:

import React from 'react';
import {
  Dialog,
  Form,
  FormItem,
  Switch,
  Tab,
  TabContainer,
} from '@ui5/webcomponents-react';
function App() {
  return (
    <Dialog open={true}>
      <TabContainer>
        <Tab text="Tab SAP/ui5-webcomponents-react#1">
          <Form>
            <FormItem label="Something something">
              <Switch />
            </FormItem>
          </Form>
        </Tab>
        <Tab text="Tab SAP/ui5-webcomponents-react#2">
          <Form>
            <FormItem label="Something something">
              <Switch />
            </FormItem>
          </Form>
        </Tab>
      </TabContainer>
    </Dialog>
  );
}

export default App;

UI5 Web Components for React Version

1.26.0

UI5 Web Components Version

1.23.1

Browser

Chrome

Mar 15 '24 12:03 ej612

Hi @ej612

it seems like that the ui5-tabcontainer is not handling the default selection logic correctly. You can workaround the issue by adding selected to a Tab. (Example)

Since the TabContainer is a web component developed by the ui5-webcomponents team, I'm going to forward this issue to their repo.

Hi colleagues, with v1.23.0 the TabContainer doesn't initially show the content of the first tab if no selected attribute is explicitly set. I've prepared two stackBlitz examples that shows the current and the previous behavior.

Current behavior (v1.23.1): https://stackblitz.com/edit/js-bjrkor?file=index.js,index.html

Previous behavior (v1.22.0): https://stackblitz.com/edit/js-v5z1ay?file=index.html,index.js