The selected property issue on TabContainer

[mrmabo]

Describe the bug
If the selected tab rendered due to the API response, the selected property on this tab cannot be invoked properly.

To reproduce
Steps to reproduce the behavior:

1. Set the selected attribute on Prerequisites
2. Make an API call to render this tab.

Expected behavior
Add boolean value on the selected attribute so that we can set the Prerequisites tab selected is true and other tabs selected is false after component renders.

Screenshots
Prerequisites tab base on the API response to render, and add the selected attribute on this tab. The content of Prerequisites will display underneath the content of Course Details.

Context

• UI5 Web Components version : 0.21.7
• OS/Platform: Windows and Mac

[ilhan007]

Hi @mrmabo

can you describe the steps by adding your code, the markup and the API calls you mentioned.

If you create a codesandbox example, it would be great!

BR,
ilhan

[mrmabo]

Hi @ilhan007

Here is what I tried, but it doesn't work

<ui5-tabcontainer class="full-width" collapsed fixed show-overflow>
        <ui5-tab text="Home" selected="false"></ui5-tab>
        <ui5-tab text="What's new" selected="true"></ui5-tab>
        <ui5-tab text="Who are we"></ui5-tab>
        <ui5-tab text="About"></ui5-tab>
        <ui5-tab text="Contacts"></ui5-tab>
</ui5-tabcontainer>

By adding a selected attribute, always selects the tab irrespective of the attribute value true or false.

[fifoosid]

Hi @mrmabo

This is one way how you can achieve the expected behaviour in React:

function App () {

  const [selectedTab, setSelectedTab] = useState(0);

  setTimeout(() => {
    setSelectedTab(selectedTab => 2)
  }, 3000)

  return (
    <ui5-busyindicator style={{width: 100 + '%'}} active={selectedTab === 0 || undefined}>
      <ui5-tabcontainer collapsed fixed show-overflow>
        <ui5-tab text="Home" selected={selectedTab === 1 || undefined} />
        <ui5-tab text="What's new" selected={selectedTab === 2 || undefined} />
        <ui5-tab text="Who are we" selected={selectedTab === 3 || undefined} />
        <ui5-tab text="About" selected={selectedTab === 4 || undefined} />
        <ui5-tab text="Contacts" selected={selectedTab === 5 || undefined} />
      </ui5-tabcontainer>
    </ui5-busyindicator>
  );
}

Let me explain the code above:

1. We initialise the selecetedTab as 0(no tab is selected)
2. We fake an API call via the setTimeout
3. selected={selectedTab === 1 || undefined} toggles the selected property on each tab
4. You can notice that we are using the same syntax for the active attribute of the ui5-busyindicator(which is boolean as well): active={selectedTab === 0 || undefined}.

Note: The behaviour of setting the first tab as selected if no tab is initially selected from our side will be fixed.