fix(ui5-tabcontainer): fix tab selection (#8547)

* fix(ui5-tabcontainer): fix tab selection

* refactor: separate realTabReference from selectedTabReference

---------

Co-authored-by: Petar Dimov <[email protected]>

Author: TeodorTaushanov

packages/main/src/Tab.ts

@@ -149,6 +149,9 @@ class Tab extends UI5Element implements ITab, ITabbable {
 	@property({ type: Boolean })
 	isTopLevelTab!: boolean;
 
+	@property({ type: Object, defaultValue: null })
+	_selectedTabReference!: Tab;
+
 	/**
 	 * Holds the content associated with this tab.
 	 * @public
@@ -233,15 +236,15 @@ class Tab extends UI5Element implements ITab, ITabbable {
 	}
 
 	get isOnSelectedTabPath(): boolean {
-		return this.selected || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
+		return this._selectedTabReference === this || this.tabs.some(subTab => subTab.isOnSelectedTabPath);
 	}
 
 	get _effectiveSlotName() {
 		return this.isOnSelectedTabPath ? this._individualSlot : `disabled-${this._individualSlot}`;
 	}
 
 	get _defaultSlotName() {
-		return this.selected ? "" : "disabled-slot";
+		return this._selectedTabReference === this ? "" : "disabled-slot";
 	}
 
 	get hasOwnContent() {

packages/main/src/TabContainer.ts

@@ -479,6 +479,12 @@ class TabContainer extends UI5Element {
 			tab.isTopLevelTab = items.some(i => i === tab);
 		});
 
+		walk(items, item => {
+			if (!item.isSeparator) {
+				(item as Tab)._selectedTabReference = this._selectedTab;
+			}
+		});
+
 		this._setIndentLevels(items);
 	}
 

packages/main/test/pages/TabContainer.html

@@ -261,7 +261,7 @@ <h2>Tab Container Start And End Overflow</h2>
 	<section>
 		<h2>Icon only</h2>
 		<ui5-tabcontainer id="tabContainerIconOnly">
-			<ui5-tab icon="sap-icon://card" selected>
+			<ui5-tab icon="sap-icon://card">
 				<ui5-button>Button 11</ui5-button>
 				<ui5-button>Button 12</ui5-button>
 			</ui5-tab>

packages/main/test/specs/TabContainer.spec.js

@@ -17,6 +17,13 @@ describe("TabContainer general interaction", () => {
 		assert.strictEqual(selectedFilter.id, selectedTab.id, "The IDs of the ui5-tab and the rendered tab matches.");
 	});
 
+	it("tests initially no explicitly selected tab", async () => {
+		const tabContainer = await browser.$("#tabContainerIconOnly");
+		const selectedSlot = await tabContainer.shadow$('slot[name="default-1"]');
+
+		assert.ok(await selectedSlot.isExisting(), "selected slot is correct");
+	});
+
 	it("tests empty tab container", async () => {
 		assert.ok(await browser.$("#tabContainerEmpty").isDisplayed(), "Empty tab container is rendered.");
 	});
@@ -519,7 +526,7 @@ describe("TabContainer drag and drop tests", () => {
 		let expectedOrder = moveElementById(currentOrder, await tabContainer.getRealTabId(draggedStripItem), await tabContainer.getRealTabId(dropTargetStripItem));
 		currentOrder = await tabContainer.getItemsIds("tabContainerDnd");
 		assert.deepEqual(currentOrder, expectedOrder, "Items order has changed");
-		
+
 		displayedStripItems = await tabContainer.getDisplayedTabStripItems("tabContainerDnd");
 		draggedStripItem = displayedStripItems[1];
 		dropTargetStripItem = displayedStripItems[displayedStripItems.length - 1];
@@ -534,7 +541,7 @@ describe("TabContainer drag and drop tests", () => {
 		let draggedStripItem = displayedStripItems[displayedStripItems.length - 1];
 		let dropTargetStripItem = displayedStripItems[displayedStripItems.length - 2];
 		let currentOrder = await tabContainer.getItemsIds("tabContainerDnd");
-		
+
 		await dragAndDropInStrip(draggedStripItem, dropTargetStripItem, "Before");
 		let expectedOrder = moveElementById(currentOrder, await tabContainer.getRealTabId(draggedStripItem), await tabContainer.getRealTabId(dropTargetStripItem));
 		currentOrder = await tabContainer.getItemsIds("tabContainerDnd");
@@ -574,7 +581,7 @@ describe("TabContainer drag and drop tests", () => {
 		let draggedPopoverItem = displayedPopoverItems[0];
 		let dropTargetPopoverItem = displayedPopoverItems[2];
 		let currentOrder = await tabContainer.getItemsIds("tabContainerDnd");
-		
+
 		await dragAndDropInPopover(draggedPopoverItem, dropTargetPopoverItem, "After");
 		let expectedOrder = moveElementById(currentOrder, await tabContainer.getRealTabId(draggedPopoverItem), await tabContainer.getRealTabId(dropTargetPopoverItem));
 		currentOrder = await tabContainer.getItemsIds("tabContainerDnd");