From 4f5587bb7001e7cb3825c614cd93b6a2dd3235ba Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Wed, 7 Sep 2022 15:32:09 +0300
Subject: [PATCH 1/2] fix(ui5-tabcontainer): fixed error when no tabs

---
 packages/main/src/TabContainer.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
index ee26b56429db..15598ce57e8e 100644
--- a/packages/main/src/TabContainer.js
+++ b/packages/main/src/TabContainer.js
@@ -378,17 +378,20 @@ class TabContainer extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		// update selected tab
 		this._allItemsAndSubItems = this._getAllSubItems(this.items);
-		if (this._allItemsAndSubItems.length) {
-			const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
-			if (selectedTabs.length) {
-				this._selectedTab = selectedTabs[0];
-			} else {
-				this._selectedTab = this._allItemsAndSubItems[0];
-				this._selectedTab._selected = true;
-			}
+		if (!this._allItemsAndSubItems.length) {
+			return;
+		}
+
+		// update selected tab
+		const selectedTabs = this._allItemsAndSubItems.filter(tab => tab.selected);
+		if (selectedTabs.length) {
+			this._selectedTab = selectedTabs[0];
+		} else {
+			this._selectedTab = this._allItemsAndSubItems[0];
+			this._selectedTab._selected = true;
 		}
+
 		this._setItemsPrivateProperties(this.items);
 
 		if (!this._animationRunning) {
@@ -401,6 +404,10 @@ class TabContainer extends UI5Element {
 	}
 
 	onAfterRendering() {
+		if (!this.items.length) {
+			return;
+		}
+
 		this._setItemsForStrip();
 
 		if (!this.shadowRoot.contains(document.activeElement)) {

From 73179fe88b946908a3a2c8a678fe8e73771e377c Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Wed, 7 Sep 2022 15:45:12 +0300
Subject: [PATCH 2/2] fix(ui5-tabcontainer): fixed error when no tabs

---
 packages/main/test/pages/TabContainer.html    | 7 ++++++-
 packages/main/test/specs/TabContainer.spec.js | 8 ++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
index 813e51a91936..949b55984c59 100644
--- a/packages/main/test/pages/TabContainer.html
+++ b/packages/main/test/pages/TabContainer.html
@@ -760,6 +760,11 @@ <h2>Text only Start And End Overflow Custom Overflow Buttons</h2>
 			<ui5-button id="selectLast">Select Last Tab</ui5-button>
 			<ui5-button id="selectNested">Select a Nested Tab</ui5-button>
 		</section>
+		<section>
+			<ui5-title>Empty Tab Container</ui5-title>
+			<ui5-tabcontainer id="tabContainerEmpty">
+			</ui5-tabcontainer>
+		</section>
 	</section>
 
 	<script>
@@ -794,7 +799,7 @@ <h2>Text only Start And End Overflow Custom Overflow Buttons</h2>
 					walk(tab.subTabs, callback);
 			}});
 		};
-		
+
 		function getTabSelectorCallback(target) {
 			return (tab) => tab.selected = tab === target;
 		}
diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js
index ca8d283e0c36..4c422f6deb13 100644
--- a/packages/main/test/specs/TabContainer.spec.js
+++ b/packages/main/test/specs/TabContainer.spec.js
@@ -16,6 +16,10 @@ describe("TabContainer general interaction", () => {
 		assert.strictEqual(selectedFilter.id, selectedTab.id, "The IDs of the ui5-tab and the rendered tab matches.");
 	});
 
+	it("tests empty tab container", async () => {
+		assert.ok(await browser.$("#tabContainerEmpty").isDisplayed(), "Empty tab container is rendered.");
+	});
+
 	it("tests tabSelect event", async () => {
 		const item = await browser.$("#tabContainer1").shadow$(".ui5-tab-strip-item:nth-child(3)");
 		const result = await browser.$("#result");
@@ -46,7 +50,7 @@ describe("TabContainer general interaction", () => {
 		// Assert
 		assert.ok(await selectedTab.hasClass("ui5-tab-strip-item--selected"), "previously selected tab is still selected");
 		assert.notOk(await newTab.hasClass("ui5-tab-strip-item--selected"), "clicked tab is not selected");
-	
+
 		// Clean-up
 		await cbPrevent.click();
 	});
@@ -229,7 +233,7 @@ describe("TabContainer general interaction", () => {
 		// Setup
 		const getTabInStripDomRef = tab => tab.getTabInStripDomRef();
 		const getElementInBrowser = el => document.querySelector(el);
-	
+
 		const tabContainer = await browser.$("#tcSmall");
 		await tabContainer.scrollIntoView();