feat(ui5-tabcontainer): add noAutoSelection property

packages/main/cypress/specs/TabContainer.cy.tsx

@@ -0,0 +1,29 @@
+import TabContainer from "../../src/TabContainer.js";
+import Tab from "../../src/Tab.js";
+
+describe("TabContainer general interaction", () => {
+	it("Tests no auto selection", () => {
+		cy.mount(
+			<TabContainer no-auto-selection id="tcNoAuto">
+				<Tab text="Products ID">
+					tab1
+				</Tab>
+				<Tab text="Availability">
+					tab2
+				</Tab>
+				<Tab text="Expiration Date">
+					tab3
+				</Tab>
+			</TabContainer>
+		);
+
+		cy.get("#tcNoAuto")
+			.then(tc => {
+				const tabContainer = tc.get(0) as TabContainer;
+				const allItems = tabContainer.allItems;
+				allItems.forEach(item => {
+					cy.wrap(item).should("have.prop", "selected", false);
+				});
+			});
+	});
+});

packages/main/src/TabContainer.ts

@@ -274,6 +274,18 @@ class TabContainer extends UI5Element {
 	@property()
 	tabsPlacement: `${TabContainerTabsPlacement}` = "Top";
 
+	/**
+	 * Defines if no tab will be selected initially.
+	 *
+	 * **Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.
+	 * Setting this property to `true` allows preventing this behavior.
+	 * @default false
+	 * @public
+	 * @since 2.9.0
+	 */
+	@property({ type: Boolean })
+	noAutoSelection = false;
+
 	/**
 	 * Defines the current media query size.
 	 * @private
@@ -374,8 +386,10 @@ class TabContainer extends UI5Element {
 
 		if (selectedTab) {
 			this._selectedTab = selectedTab;
-		} else {
+		} else if (!this.noAutoSelection) {
 			this._selectedTab = this._itemsFlat[0] as Tab;
+		} else {
+			this._selectedTab = undefined;
 		}
 
 		walk(this.items, item => {
@@ -975,10 +989,6 @@ class TabContainer extends UI5Element {
 		const tabStrip = this._getTabStrip();
 		let allItemsWidth = 0;
 
-		if (!this._selectedTab) {
-			return;
-		}
-
 		const itemsDomRefs = this.items.map(item => item.getDomRefInStrip()) as Array<TabInStrip | TabSeparatorInStrip>;
 
 		// make sure the overflows are hidden
@@ -1428,6 +1438,7 @@ class TabContainer extends UI5Element {
 			root: {
 				"ui5-tc-root": true,
 				"ui5-tc--textOnly": this.textOnly,
+				"ui5-tc--noTabSelected": !this._selectedTab,
 				"ui5-tc--withAdditionalText": this.withAdditionalText,
 				"ui5-tc--standardTabLayout": this.standardTabLayout,
 			},

packages/main/src/TabContainerTemplate.tsx

@@ -45,6 +45,7 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 				"ui5-tc--textOnly": this.textOnly,
 				"ui5-tc--withAdditionalText": this.withAdditionalText,
 				"ui5-tc--standardTabLayout": this.standardTabLayout,
+				"ui5-tc--noTabSelected": !this._selectedTab,
 			}}
 		>
 			{this.tabsAtTheBottom && partials.contentArea.call(this)}

packages/main/src/themes/TabContainer.css

@@ -177,3 +177,7 @@
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
 }
+
+.ui5-tc-root.ui5-tc--noTabSelected .ui5-tc__content {
+	padding: 0;
+}

packages/main/test/pages/TabContainer.html

@@ -943,6 +943,50 @@ <h3>Narrow Tab Container</h3>
 		</ui5-tabcontainer>
 	</section>
 
+	<section>
+		<h2>No tab initially selected</h2>
+		<ui5-tabcontainer no-auto-selection id="tcNoAuto">
+			<ui5-tab text="Products ID">
+				<ui5-button>Button 11</ui5-button>
+				<ui5-button>Button 12</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Availability">
+				<ui5-button>Button 2</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Expiration Date">
+				<ui5-button>Button 3</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Date of Delivery">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Date of Manufacture">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Value">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Price">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Net Profit">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Company Name">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Warehouse Location">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Address">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Country">
+				<ui5-button>Button 4</ui5-button>
+			</ui5-tab>
+		</ui5-tabcontainer>
+		<ui5-button id="resetBtn">Reset tab selection</ui5-button>
+	</section>
+
 	<script>
 		document.getElementById("tabContainer1").addEventListener("ui5-tab-select", async function (event) {
 			result.innerHTML = event.detail.tab.text;
@@ -1047,6 +1091,10 @@ <h3>Narrow Tab Container</h3>
 			tab.focus();
 		});
 
+		resetBtn.addEventListener("click", () => {
+			tcNoAuto.allItems.forEach(tab => tab.selected = false);
+		});
+
 	</script>
 </body>