Skip to content

Commit 7a966ef

Browse files
kskondovkskondov
authored
fix(ui5-tabcontainer): update tabs in strip properly (#12190)
tabs no longer change position when selected Fixes: #11087
1 parent f70a3f0 commit 7a966ef

File tree

2 files changed

+83
-9
lines changed

2 files changed

+83
-9
lines changed

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

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -494,6 +494,54 @@ describe("TabContainer general interaction", () => {
494494
});
495495
});
496496

497+
it("tests start and end overflow behavior - tabs don't move to the right if there is enough space", () => {
498+
cy.mount(
499+
<TabContainer id="tabContainerStartAndEndOverflow" overflowMode="StartAndEnd">
500+
<Tab text="One">Tab 1</Tab>
501+
<Tab text="Two">Tab 2</Tab>
502+
<Tab text="Three">Tab 3</Tab>
503+
<Tab text="Four">Tab 4</Tab>
504+
<Tab text="Five">Tab 5</Tab>
505+
<Tab text="Six">Tab 6</Tab>
506+
<Tab text="Seven">Tab 7</Tab>
507+
<Tab text="Eight">Tab 8</Tab>
508+
<Tab text="Nine">Tab 9</Tab>
509+
<Tab text="Ten" selected>Tab 10</Tab>
510+
<Tab text="Eleven">Tab 11</Tab>
511+
<Tab text="Twelve">Tab 12</Tab>
512+
<Tab text="Thirteen">Tab 13</Tab>
513+
<Tab text="Fourteen">Tab 14</Tab>
514+
<Tab text="Fifteen">Tab 15</Tab>
515+
<Tab text="Sixteen">Tab 16</Tab>
516+
<Tab text="Seventeen">Tab 17</Tab>
517+
<Tab text="Eighteen">Tab 18</Tab>
518+
<Tab text="Nineteen">Tab 19</Tab>
519+
<Tab text="Twenty">Twenty</Tab>
520+
<Tab text="Twenty One">Twenty One</Tab>
521+
<Tab text="Twenty Two">Twenty Two</Tab>
522+
<Tab text="Twenty Three">Twenty Three</Tab>
523+
<Tab text="Twenty Four">Twenty Four</Tab>
524+
<Tab text="Twenty Five">Twenty Five</Tab>
525+
<Tab text="Twenty Six">Twenty Six</Tab>
526+
<Tab text="Twenty Seven">Twenty Seven</Tab>
527+
<Tab text="Twenty Eight">Twenty Eight</Tab>
528+
<Tab text="Twenty Nine">Twenty Nine</Tab>
529+
<Tab text="Thirty">Thirty</Tab>
530+
</TabContainer>
531+
);
532+
533+
cy.viewport(600, 1080);
534+
535+
cy.get("#tabContainerStartAndEndOverflow").shadow().find(".ui5-tc__overflow--start").as("startOverflow");
536+
cy.get("#tabContainerStartAndEndOverflow").should("have.attr", "overflow-mode", "StartAndEnd");
537+
cy.get("@startOverflow").should("have.text", "+4");
538+
539+
cy.get("#tabContainerStartAndEndOverflow").shadow().find(".ui5-tab-strip-item:nth-child(5)").as("tab5");
540+
cy.get("@tab5").click();
541+
542+
cy.get("@startOverflow").should("have.text", "+4");
543+
});
544+
497545
it("tests end overflow behavior", () => {
498546
cy.mount(tabContainerEndOverflow);
499547
cy.viewport(1000, 1080);
@@ -702,7 +750,7 @@ describe("TabContainer general interaction", () => {
702750
cy.get("@list").find("ui5-li-custom").eq(0).click();
703751
cy.get("#tabContainerCustomOverflowButtons").then((tc) => {
704752
const tabContainer = tc.get(0) as TabContainer;
705-
const SELECTED_TAB_TEXT = "Thirteen";
753+
const SELECTED_TAB_TEXT = "Twelve";
706754
const selectedTab = tabContainer._selectedTab;
707755
cy.wrap(selectedTab).should("have.attr", "text", SELECTED_TAB_TEXT);
708756
});

‎packages/main/src/TabContainer.ts

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -984,10 +984,29 @@ class TabContainer extends UI5Element {
984984

985985
const itemsDomRefs = this.items.map(item => item.getDomRefInStrip()) as Array<TabInStrip | TabSeparatorInStrip>;
986986

987+
let allVisibleItemsWidth = 0;
988+
989+
const selectedTab = this._getRootTab(this._selectedTab);
990+
const containerWidth = this._getTabStrip().offsetWidth;
991+
const selectedTabDomRef = selectedTab?.getDomRefInStrip() as TabInStrip | undefined;
992+
const visibleItemsDomRefs = itemsDomRefs.filter(item => !item.hidden);
993+
994+
visibleItemsDomRefs.forEach(item => {
995+
allVisibleItemsWidth += this._getItemWidth(item);
996+
});
997+
998+
const changeTabPosition = visibleItemsDomRefs.length !== itemsDomRefs.length && this.isModeStartAndEnd && selectedTabDomRef && visibleItemsDomRefs.indexOf(selectedTabDomRef) !== -1 && allVisibleItemsWidth < containerWidth && this._getItemWidth(selectedTabDomRef) < containerWidth;
999+
9871000
// make sure the overflows are hidden
9881001
this._getStartOverflow().setAttribute("hidden", "");
9891002
this._getEndOverflow().setAttribute("hidden", "");
9901003

1004+
let firstVisibleIndex;
1005+
1006+
if (changeTabPosition) {
1007+
firstVisibleIndex = itemsDomRefs.indexOf(visibleItemsDomRefs[0]);
1008+
}
1009+
9911010
// show all tabs
9921011
for (let i = 0; i < itemsDomRefs.length; i++) {
9931012
itemsDomRefs[i].removeAttribute("hidden");
@@ -1005,7 +1024,7 @@ class TabContainer extends UI5Element {
10051024
}
10061025

10071026
if (this.isModeStartAndEnd) {
1008-
this._updateStartAndEndOverflow(itemsDomRefs);
1027+
this._updateStartAndEndOverflow(itemsDomRefs, firstVisibleIndex);
10091028
this._updateOverflowCounters();
10101029
} else {
10111030
this._updateEndOverflow(itemsDomRefs);
@@ -1042,14 +1061,13 @@ class TabContainer extends UI5Element {
10421061
this._endOverflowText = this.overflowButtonText;
10431062
}
10441063

1045-
_updateStartAndEndOverflow(itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>) {
1064+
_updateStartAndEndOverflow(itemsDomRefs: Array<TabInStrip |TabSeparatorInStrip>, firstVisibleIndex?: number) {
10461065
let containerWidth = this._getTabStrip().offsetWidth;
10471066
const selectedTab = this._getRootTab(this._selectedTab);
10481067
const selectedTabDomRef = selectedTab?.getDomRefInStrip() as TabInStrip | undefined;
10491068
const selectedItemIndexAndWidth = this._getSelectedItemIndexAndWidth(itemsDomRefs, selectedTabDomRef);
10501069
const hasStartOverflow = this._hasStartOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
10511070
const hasEndOverflow = this._hasEndOverflow(containerWidth, itemsDomRefs, selectedItemIndexAndWidth);
1052-
let firstVisible;
10531071
let lastVisible;
10541072

10551073
// has "end", but no "start" overflow
@@ -1076,9 +1094,11 @@ class TabContainer extends UI5Element {
10761094
// width is changed
10771095
containerWidth = this._getTabStrip().offsetWidth;
10781096

1079-
firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
1097+
if (!firstVisibleIndex) {
1098+
firstVisibleIndex = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
1099+
}
10801100

1081-
for (let i = firstVisible - 1; i >= 0; i--) {
1101+
for (let i = firstVisibleIndex - 1; i >= 0; i--) {
10821102
itemsDomRefs[i].setAttribute("hidden", "");
10831103
itemsDomRefs[i].setAttribute("start-overflow", "");
10841104
}
@@ -1093,10 +1113,12 @@ class TabContainer extends UI5Element {
10931113
// width is changed
10941114
containerWidth = this._getTabStrip().offsetWidth;
10951115

1096-
firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
1097-
lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisible);
1116+
if (!firstVisibleIndex) {
1117+
firstVisibleIndex = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
1118+
}
1119+
lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisibleIndex);
10981120

1099-
for (let i = firstVisible - 1; i >= 0; i--) {
1121+
for (let i = firstVisibleIndex - 1; i >= 0; i--) {
11001122
itemsDomRefs[i].setAttribute("hidden", "");
11011123
itemsDomRefs[i].setAttribute("start-overflow", "");
11021124
}
@@ -1108,6 +1130,10 @@ class TabContainer extends UI5Element {
11081130
}
11091131

11101132
_hasStartOverflow(containerWidth: number, itemsDomRefs: Array<TabInStrip | TabSeparatorInStrip>, selectedItemIndexAndWidth: { width: number; index: number}) {
1133+
if (this._getStartOverflow().textContent !== "+0") {
1134+
return true;
1135+
}
1136+
11111137
if (selectedItemIndexAndWidth.index === 0) {
11121138
return false;
11131139
}

0 commit comments

Comments
 (0)