themesberg / themesberg/flowbite-react

Incorrect change of Carousel indicators when dragging from 1 to 0

Open
#531 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

:bug: bug confirmed good first issue
Dominant language
TypeScript
Stars
2.1k
Forks
506
PR merge metrics
No merged PRs in 30d

Description

Describe the bug

Carousel indicator doesn't change its state when dragging from 1 to 0, it just keep staying at 1.

https://user-images.githubusercontent.com/91225197/211947732-43730e6c-1468-44b4-91df-baeb20dc4ec7.mp4


To Reproduce

  1. Go to https://flowbite-react.com/carousel
  2. Try to drag from 1 to 0 slide
  3. See error

Cause of such behavior is the last part of the condition down below (carouselContainer.current.scrollLeft !== 0):


  useEffect(() => {
    if (carouselContainer.current && !isDragging && carouselContainer.current.scrollLeft !== 0) {
      setActiveItem(Math.round(carouselContainer.current.scrollLeft / carouselContainer.current.clientWidth));
    }
  }, [isDragging]);

Without that condition Carousel works as expected (see exp. behavior).
When dragging from 1 to 0 carouselContainer.current.scrollLeft should be 0 to properly calculate a new active item id.


Been trying to commit a fix but this tests had failed:

1. Carousel > should render and show first item
2. Carousel > Controls > should change slide via click on indicator
3. Carousel > Controls > should change slide via click on control
5. Carousel > Items traversal > should go through items by default
6. Carousel > Items traversal > should go through items after given seconds
7. Carousel > Items traversal > should not to go through items

I have checked each case manually and the component works properly.

Could there be any problem with the tests?
I've found an issue https://github.com/themesberg/flowbite-react/issues/49 where that condition was added. Lines 56-57 here.


Expected behavior

https://user-images.githubusercontent.com/91225197/211943071-399c53b2-1fcd-439f-897a-571118b32281.mp4


System information:
OS: Windows 10
Browser: Chrome, also tested in Edge and Safari (iOS)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Carousel component and the useEffect condition shown in the issue, then reproduce the drag from slide 1 to slide 0 at the Carousel demo. Run the listed Carousel rendering, Controls, and Items traversal tests to understand their current expectations. Done means the first indicator activates after dragging back to slide 0 and the relevant tests pass.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.