themesberg / themesberg/flowbite-react
Incorrect change of Carousel indicators when dragging from 1 to 0
Nobody has claimed this yet.
- 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.
To Reproduce
- Go to https://flowbite-react.com/carousel
- Try to drag from 1 to 0 slide
- 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
System information:
OS: Windows 10
Browser: Chrome, also tested in Edge and Safari (iOS)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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