Skip to content

[Carousel][SF]: navigateTo method does not always move Carousel #13132

@caroline-ferri

Description

@caroline-ferri

Bug Description

Continuation of #12689 . After upgrading to 2.19.2, our Card Carousel component navigation is broken.

Currently, when we call navigateTo with the carouselDomRef.visibleItemsIndices[0] + 1, the navigateTo() method does not move that carousel if more than 1 item is currently displayed in the page.

I have created a webcomponents sample that leverages the navigateTo method for moving the carousel. When the "Next" button is clicked the navigateTo method does not move the next card into view. When I use the internal _moveToItem() method, the Carousel appears to navigate as expected. Please note that this only occurs for the "next" button behavior and not the "previous" button behavior.

Affected Component

ui5-carousel

Expected Behaviour

When we call carouselDomRef.navigateTo(nextIndex) where nextIndex is set to carouselDomRef.visibleItemsIndices[0] + 1, we expect the Carousel to move over 1 card.

Isolated Example

https://stackblitz.com/edit/js-6ureev5p?file=index.js

Steps to Reproduce

  1. Navigate to https://stackblitz.com/edit/js-6ureev5p?file=index.js
  2. Click the "Next" button on the carousel
  3. notice that the carousel does not move over one card
  4. Resize the application screen such that 1 carousel item is visible
  5. click the "Next" button
  6. notice that the carousel moves over one card
  7. Resize application screen such that 3 carousel items are visible
  8. uncomment line 41 in index.js and save + refresh the application
  9. click the "Next" button
  10. notice that the carousel shifts over 1 item (although the animation doesn't always appear on the first try)
  11. click the "Previous" button
  12. notice that the carousel shifts back 1 item as expected
    ...

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

2.19.2

Browser

Chrome

Operating System

macOS

Additional Context

No response

Organization

SFSF

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Type

Projects

Status

New Issues

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions