fix(ui5-tabcontainer): update tabs in strip properly (#12190)

tabs no longer change position when selected
Fixes: #11087

Author: kskondov

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

@@ -494,6 +494,54 @@ describe("TabContainer general interaction", () => {
 		});
 	});
 
+	it("tests start and end overflow behavior - tabs don't move to the right if there is enough space", () => {
+		cy.mount(
+			<TabContainer id="tabContainerStartAndEndOverflow" overflowMode="StartAndEnd">
+				<Tab text="One">Tab 1</Tab>
+				<Tab text="Two">Tab 2</Tab>
+				<Tab text="Three">Tab 3</Tab>
+				<Tab text="Four">Tab 4</Tab>
+				<Tab text="Five">Tab 5</Tab>
+				<Tab text="Six">Tab 6</Tab>
+				<Tab text="Seven">Tab 7</Tab>
+				<Tab text="Eight">Tab 8</Tab>
+				<Tab text="Nine">Tab 9</Tab>
+				<Tab text="Ten" selected>Tab 10</Tab>
+				<Tab text="Eleven">Tab 11</Tab>
+				<Tab text="Twelve">Tab 12</Tab>
+				<Tab text="Thirteen">Tab 13</Tab>
+				<Tab text="Fourteen">Tab 14</Tab>
+				<Tab text="Fifteen">Tab 15</Tab>
+				<Tab text="Sixteen">Tab 16</Tab>
+				<Tab text="Seventeen">Tab 17</Tab>
+				<Tab text="Eighteen">Tab 18</Tab>
+				<Tab text="Nineteen">Tab 19</Tab>
+				<Tab text="Twenty">Twenty</Tab>
+				<Tab text="Twenty One">Twenty One</Tab>
+				<Tab text="Twenty Two">Twenty Two</Tab>
+				<Tab text="Twenty Three">Twenty Three</Tab>
+				<Tab text="Twenty Four">Twenty Four</Tab>
+				<Tab text="Twenty Five">Twenty Five</Tab>
+				<Tab text="Twenty Six">Twenty Six</Tab>
+				<Tab text="Twenty Seven">Twenty Seven</Tab>
+				<Tab text="Twenty Eight">Twenty Eight</Tab>
+				<Tab text="Twenty Nine">Twenty Nine</Tab>
+				<Tab text="Thirty">Thirty</Tab>
+			</TabContainer>
+		);
+
+		cy.viewport(600, 1080);
+
+		cy.get("#tabContainerStartAndEndOverflow").shadow().find(".ui5-tc__overflow--start").as("startOverflow");
+		cy.get("#tabContainerStartAndEndOverflow").should("have.attr", "overflow-mode", "StartAndEnd");
+		cy.get("@startOverflow").should("have.text", "+4");
+
+		cy.get("#tabContainerStartAndEndOverflow").shadow().find(".ui5-tab-strip-item:nth-child(5)").as("tab5");
+		cy.get("@tab5").click();
+
+		cy.get("@startOverflow").should("have.text", "+4");
+	});
+
 	it("tests end overflow behavior", () => {
 		cy.mount(tabContainerEndOverflow);
 		cy.viewport(1000, 1080);
@@ -702,7 +750,7 @@ describe("TabContainer general interaction", () => {
 		cy.get("@list").find("ui5-li-custom").eq(0).click();
 		cy.get("#tabContainerCustomOverflowButtons").then((tc) => {
 			const tabContainer = tc.get(0) as TabContainer;
-			const SELECTED_TAB_TEXT = "Thirteen";
+			const SELECTED_TAB_TEXT = "Twelve";
 			const selectedTab = tabContainer._selectedTab;
 			cy.wrap(selectedTab).should("have.attr", "text", SELECTED_TAB_TEXT);
 		});

packages/main/src/TabContainer.ts

@@ -984,10 +984,29 @@ class TabContainer extends UI5Element {
 
 		const itemsDomRefs = this.items.map(item => item.getDomRefInStrip()) as Array<TabInStrip | TabSeparatorInStrip>;
 
+		let allVisibleItemsWidth = 0;
+
+		const selectedTab = this._getRootTab(this._selectedTab);
+		const containerWidth = this._getTabStrip().offsetWidth;
+		const selectedTabDomRef = selectedTab?.getDomRefInStrip() as TabInStrip | undefined;
+		const visibleItemsDomRefs = itemsDomRefs.filter(item => !item.hidden);
+
+		visibleItemsDomRefs.forEach(item => {
+			allVisibleItemsWidth += this._getItemWidth(item);
+		});
+
+		const changeTabPosition = visibleItemsDomRefs.length !== itemsDomRefs.length && this.isModeStartAndEnd && selectedTabDomRef && visibleItemsDomRefs.indexOf(selectedTabDomRef) !== -1 && allVisibleItemsWidth < containerWidth && this._getItemWidth(selectedTabDomRef) < containerWidth;
+
 		// make sure the overflows are hidden
 		this._getStartOverflow().setAttribute("hidden", "");
 		this._getEndOverflow().setAttribute("hidden", "");
 
+		let firstVisibleIndex;
+
+		if (changeTabPosition) {
+			firstVisibleIndex = itemsDomRefs.indexOf(visibleItemsDomRefs[0]);
+		}
+
 		// show all tabs
 		for (let i = 0; i < itemsDomRefs.length; i++) {
 			itemsDomRefs[i].removeAttribute("hidden");
@@ -1005,7 +1024,7 @@ class TabContainer extends UI5Element {
 		}
 
 		if (this.isModeStartAndEnd) {
-			this._updateStartAndEndOverflow(itemsDomRefs);
+			this._updateStartAndEndOverflow(itemsDomRefs, firstVisibleIndex);
 			this._updateOverflowCounters();
 		} else {
 			this._updateEndOverflow(itemsDomRefs);
@@ -1042,14 +1061,13 @@ class TabContainer extends UI5Element {
 		this._endOverflowText = this.overflowButtonText;
 	}
 
-	_updateStartAndEndOverflow(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>) {
+	_updateStartAndEndOverflow(itemsDomRefs: Array<TabInStrip |TabSeparatorInStrip>, firstVisibleIndex?: number) {
 		let containerWidth = this._getTabStrip().offsetWidth;
 		const selectedTab = this._getRootTab(this._selectedTab);
 		const selectedTabDomRef = selectedTab?.getDomRefInStrip() as TabInStrip | undefined;
 		const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
 		const hasStartOverflow = this._hasStartOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
 		const hasEndOverflow = this._hasEndOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
-		let firstVisible;
 		let lastVisible;
 
 		// has "end", but no "start" overflow
@@ -1076,9 +1094,11 @@ class TabContainer extends UI5Element {
 			// width is changed
 			containerWidth = this._getTabStrip().offsetWidth;
 
-			firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
+			if (!firstVisibleIndex) {
+				firstVisibleIndex = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
+			}
 
-			for (let i = firstVisible - 1; i >= 0; i--) {
+			for (let i = firstVisibleIndex - 1; i >= 0; i--) {
 				itemsDomRefs[i].setAttribute("hidden", "");
 				itemsDomRefs[i].setAttribute("start-overflow", "");
 			}
@@ -1093,10 +1113,12 @@ class TabContainer extends UI5Element {
 		// width is changed
 		containerWidth = this._getTabStrip().offsetWidth;
 
-		firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
-		lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisible);
+		if (!firstVisibleIndex) {
+			firstVisibleIndex = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
+		}
+		lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisibleIndex);
 
-		for (let i = firstVisible - 1; i >= 0; i--) {
+		for (let i = firstVisibleIndex - 1; i >= 0; i--) {
 			itemsDomRefs[i].setAttribute("hidden", "");
 			itemsDomRefs[i].setAttribute("start-overflow", "");
 		}
@@ -1108,6 +1130,10 @@ class TabContainer extends UI5Element {
 	}
 
 	_hasStartOverflow(containerWidth: number, itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, selectedItemIndexAndWidth: { width: number; index: number}) {
+		if (this._getStartOverflow().textContent !== "+0") {
+			return true;
+		}
+
 		if (selectedItemIndexAndWidth.index === 0) {
 			return false;
 		}