Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ab3a3b
fix(ui5-tabcontainer): update tabs in strip properly
kskondov Apr 1, 2025
f3d68d6
fix(ui5-tabcontainer): update tabs in strip properly
kskondov Apr 1, 2025
839ffd2
Merge branch 'main' of github.com:SAP/ui5-webcomponents into ui5-tab-…
kskondov Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions packages/main/src/TabContainer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -990,11 +990,28 @@ class TabContainer extends UI5Element {
let allItemsWidth = 0;

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");
Expand All @@ -1012,7 +1029,7 @@ class TabContainer extends UI5Element {
}

if (this.isModeStartAndEnd) {
this._updateStartAndEndOverflow(itemsDomRefs);
this._updateStartAndEndOverflow(itemsDomRefs, firstVisibleIndex);
this._updateOverflowCounters();
} else {
this._updateEndOverflow(itemsDomRefs);
Expand Down Expand Up @@ -1049,14 +1066,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
Expand All @@ -1082,10 +1098,11 @@ class TabContainer extends UI5Element {
this._getStartOverflow().removeAttribute("hidden");
// width is changed
containerWidth = this._getTabStrip().offsetWidth;
if (!firstVisibleIndex) {
firstVisibleIndex = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width);
}

firstVisible = 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", "");
}
Expand All @@ -1099,11 +1116,12 @@ class TabContainer extends UI5Element {
this._getEndOverflow().removeAttribute("hidden");
// width is changed
containerWidth = this._getTabStrip().offsetWidth;
if (!firstVisibleIndex) {
firstVisibleIndex = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
}
lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisibleIndex);

firstVisible = this._findFirstVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, selectedItemIndexAndWidth.index - 1);
lastVisible = this._findLastVisibleItem(itemsDomRefs, containerWidth, selectedItemIndexAndWidth.width, firstVisible);

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", "");
}
Expand All @@ -1115,6 +1133,9 @@ 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;
}
Expand Down
Loading