Skip to content

fix(ui5-carousel): clamp page index when items per page changes on resize #13499

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

Merged
tsanislavgatev merged 1 commit into from
May 14, 2026
+55 −3
Merged

fix(ui5-carousel): clamp page index when items per page changes on resize #13499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40 changes: 40 additions & 0 deletions packages/main/cypress/specs/Carousel.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -799,4 +799,44 @@ describe("Carousel general interaction", () => {
expect(indices.every(i => i >= 0), "visibleItemsIndices should not contain negative values").to.be.true;
});
});

it("items should remain reachable after resizing increases items per page", () => {
const navigateStub = cy.stub().as("navigateStub");

cy.viewport(800, 500);

cy.mount(
<Carousel id="resizeCarousel" itemsPerPage="S2 M2 L3 XL3" onNavigate={navigateStub}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</Carousel>
);

// At M breakpoint (800px): 2 items per page, navigate right to show items 2 and 3
cy.get("#resizeCarousel")
.trigger("mouseover")
.shadow()
.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
.last()
.realClick();

cy.get("#resizeCarousel").should("have.prop", "_currentPageIndex", 1);
cy.get("@navigateStub").should("have.been.calledOnce");

// Resize to L breakpoint (1200px): 3 items per page, all items should fit
cy.viewport(1200, 500);

// Page index should be clamped to 0 since all 3 items fit on one page
cy.get("#resizeCarousel").should("have.prop", "_currentPageIndex", 0);

// Navigate event should fire when page index changes due to resize
cy.get("@navigateStub").should("have.been.calledTwice");

// All items should be visible
cy.get("#resizeCarousel")
.shadow()
.find(".ui5-carousel-item:not(.ui5-carousel-item--hidden)")
.should("have.length", 3);
});
});
18 changes: 15 additions & 3 deletions packages/main/src/Carousel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,15 +406,27 @@ class Carousel extends UI5Element {
// Change transitively effectiveItemsPerPage by modifying _width
this._width = this.offsetWidth;
this._itemWidth = Math.floor(this._width / this.effectiveItemsPerPage);
this._updateVisibleItems(this._currentPageIndex);

// Items per page did not change or the current,
// Items per page did not change,
// therefore page index does not need to be re-adjusted
if (this.effectiveItemsPerPage === previousItemsPerPage) {
this._updateVisibleItems(this._currentPageIndex);
return;
}

this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentPageIndex, this.items.length - this.effectiveItemsPerPage);
// When items per page changes, clamp page index to the valid range
// to prevent items from becoming unreachable (e.g. when resizing
// from showing 2 to 3 items while on page 1 with only 3 items total).
const maxPageIndex = Math.max(0, this.items.length - this.effectiveItemsPerPage);
const newPageIndex = clamp(this._currentPageIndex, 0, maxPageIndex);

if (this._currentPageIndex !== newPageIndex) {
this._currentPageIndex = newPageIndex;
this.fireDecoratorEvent("navigate", { selectedIndex: newPageIndex });
}

this._updateVisibleItems(this._currentPageIndex);
this._focusedItemIndex = clamp(this._focusedItemIndex, this._currentPageIndex, this._currentPageIndex + this.effectiveItemsPerPage - 1);
}

_updateScrolling(e: ScrollEnablementEventListenerParam) {
Expand Down
Loading