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

* fix(ui5-tabcontainer): fix tab selection * refactor: separate realTabReference from selectedTabReference --------- Co-authored-by: Petar Dimov <petar.dimov@sap.com>
SAP · Mar 26, 2024 · 5eaa835 · 5eaa835
1 parent f781150
commit 5eaa835
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/packages/main/src/Tab.ts b/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() {

diff --git a/packages/main/src/TabContainer.ts b/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);
 	}
 

diff --git a/packages/main/test/pages/TabContainer.html b/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>

diff --git a/packages/main/test/specs/TabContainer.spec.js b/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");