From 9612ed6d887e657d0aa6249ac683f7518aae0ab1 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 30 Jun 2026 16:21:23 +0300 Subject: [PATCH 1/4] fix(ui5-carousel): fix navigation animation --- packages/main/cypress/specs/Carousel.cy.tsx | 18 ++++++++++++++++++ packages/main/src/Carousel.ts | 2 ++ .../main/test/pages/CarouselPublicMethods.html | 8 +++++++- 3 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx index 771193c1035e..e758f22f8bdc 100644 --- a/packages/main/cypress/specs/Carousel.cy.tsx +++ b/packages/main/cypress/specs/Carousel.cy.tsx @@ -800,6 +800,24 @@ describe("Carousel general interaction", () => { }); }); + it("_resizing remains true when navigateTo is called after _onResize with same page index", () => { + cy.mount( + + + + + + ); + + cy.get("#carousel") + .then($carousel => { + const carousel = $carousel[0]; + carousel._onResize(); + carousel.navigateTo(2); + expect(carousel._resizing).to.be.true; + }); + }); + it("items should remain reachable after resizing increases items per page", () => { const navigateStub = cy.stub().as("navigateStub"); diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index 911d123b4985..e503c30b9eb1 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -691,6 +691,8 @@ class Carousel extends UI5Element { return; } + this._resizing = false; + this._currentPageIndex = newPageIndex; this._updateVisibleItems(newPageIndex); diff --git a/packages/main/test/pages/CarouselPublicMethods.html b/packages/main/test/pages/CarouselPublicMethods.html index 51f79e73c508..331fbe1651ed 100644 --- a/packages/main/test/pages/CarouselPublicMethods.html +++ b/packages/main/test/pages/CarouselPublicMethods.html @@ -238,14 +238,15 @@ Tutorials - + Check animation after resize - navigate to 5 \ No newline at end of file From c060566ce46c1e9ecdb94a2e4148a0d9640d2439 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Tue, 30 Jun 2026 17:03:26 +0300 Subject: [PATCH 2/4] chore: fix test --- packages/main/cypress/specs/Carousel.cy.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx index e758f22f8bdc..ad5c6b92fa44 100644 --- a/packages/main/cypress/specs/Carousel.cy.tsx +++ b/packages/main/cypress/specs/Carousel.cy.tsx @@ -800,7 +800,7 @@ describe("Carousel general interaction", () => { }); }); - it("_resizing remains true when navigateTo is called after _onResize with same page index", () => { + it("_resizing remains false when navigateTo is called after _onResize", () => { cy.mount( @@ -814,7 +814,7 @@ describe("Carousel general interaction", () => { const carousel = $carousel[0]; carousel._onResize(); carousel.navigateTo(2); - expect(carousel._resizing).to.be.true; + expect(carousel._resizing).to.be.false; }); }); From 1b547927b5512965e240d2132937b8dfd4d8b685 Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Wed, 8 Jul 2026 16:30:46 +0300 Subject: [PATCH 3/4] chore: address code comments --- packages/main/cypress/specs/Carousel.cy.tsx | 25 ++++++++++++++++--- packages/main/src/Carousel.ts | 7 +++--- .../test/pages/CarouselPublicMethods.html | 7 ++++-- 3 files changed, 30 insertions(+), 9 deletions(-) diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx index ad5c6b92fa44..46ce234cea3b 100644 --- a/packages/main/cypress/specs/Carousel.cy.tsx +++ b/packages/main/cypress/specs/Carousel.cy.tsx @@ -800,21 +800,38 @@ describe("Carousel general interaction", () => { }); }); - it("_resizing remains false when navigateTo is called after _onResize", () => { + it.only("_resizing remains false when navigateTo is called after _onResize", () => { cy.mount( - + + + + ); cy.get("#carousel") .then($carousel => { const carousel = $carousel[0]; - carousel._onResize(); - carousel.navigateTo(2); + carousel.style.width = "99%"; expect(carousel._resizing).to.be.false; + + return new Cypress.Promise(resolve => { + requestAnimationFrame(() => { + carousel.style.width = "98%"; + expect(carousel._resizing).to.be.false; + + setTimeout(() => { + expect(carousel._resizing).to.be.false; + resolve(); + }, 200); + }); + }); }); }); diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts index e503c30b9eb1..261cba06d25a 100644 --- a/packages/main/src/Carousel.ts +++ b/packages/main/src/Carousel.ts @@ -401,6 +401,8 @@ class Carousel extends UI5Element { const previousItemsPerPage = this.effectiveItemsPerPage; // Set the resizing flag to suppress animation while resizing + const previousWidth = this._width; + this._resizing = true; // Change transitively effectiveItemsPerPage by modifying _width @@ -409,7 +411,8 @@ class Carousel extends UI5Element { // Items per page did not change, // therefore page index does not need to be re-adjusted - if (this.effectiveItemsPerPage === previousItemsPerPage) { + if (this._width === previousWidth && this.effectiveItemsPerPage === previousItemsPerPage) { + this._resizing = false; this._updateVisibleItems(this._currentPageIndex); return; } @@ -691,8 +694,6 @@ class Carousel extends UI5Element { return; } - this._resizing = false; - this._currentPageIndex = newPageIndex; this._updateVisibleItems(newPageIndex); diff --git a/packages/main/test/pages/CarouselPublicMethods.html b/packages/main/test/pages/CarouselPublicMethods.html index 331fbe1651ed..b2a20a7f4df7 100644 --- a/packages/main/test/pages/CarouselPublicMethods.html +++ b/packages/main/test/pages/CarouselPublicMethods.html @@ -15,7 +15,9 @@ - + @@ -239,6 +241,7 @@ +
Check animation after resize - navigate to 5 @@ -259,7 +262,7 @@ }); btnNavigate.addEventListener("click", function() { - carousel._onResize(); + carousel.style.width = "90%"; carousel.navigateTo(5); }); From c4145f9410830eee00a258ce5bbedfcca3aa0dcd Mon Sep 17 00:00:00 2001 From: Teodor Taushanov Date: Wed, 8 Jul 2026 16:41:48 +0300 Subject: [PATCH 4/4] chore: remove only from the test --- packages/main/cypress/specs/Carousel.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/Carousel.cy.tsx b/packages/main/cypress/specs/Carousel.cy.tsx index 46ce234cea3b..6fc27260bbf9 100644 --- a/packages/main/cypress/specs/Carousel.cy.tsx +++ b/packages/main/cypress/specs/Carousel.cy.tsx @@ -800,7 +800,7 @@ describe("Carousel general interaction", () => { }); }); - it.only("_resizing remains false when navigateTo is called after _onResize", () => { + it("_resizing remains false when navigateTo is called after _onResize", () => { cy.mount(