search

yaodingyd / react-flickity-component

A React.js component for using @desandro's Flickity
314 stars 51 forks source link

Cells appearing out of slide when using cellAlign, wrapAround, groupCells and onClick #117

Open McGern opened 3 years ago

McGern commented 3 years ago

Hi,

Just noticed something, not sure if it's an issue with flickity or the react wrapping, but I can't replicate it in a non-react environment.

When I am using a combination of cellAlign=right, wrapAround=true, groupCells=true and then apply an onClick event that is updating a useState, randomly (can't find a pattern) clicking on the cells (end cells mainly) causes the cells to reposition outside of the slide viewport (looks like they are reordering back to their indexed order. Made a demo by forking off the code pen demo from the github repo. You might need to click around a bit or reload, I can't get a pattern yet. Was testing in Chrome 87.0.4280.88

https://codesandbox.io/s/react-flickity-forked-wq3sg?file=/src/index.js

Thanks, J

ivanlucci1 commented 3 years ago

Hello,

Have you found a solution for this @McGern ?

I'm not using 'groupCells' option, but i'm facing the same problem here... I tried to remove all CSS styles but the problem keeps... seems to be a bug of this component.

McGern commented 3 years ago

No sorry. My solution was to not use any of those options unfortunately and had to go with a simpler approach of the standard setup. The reason I wanted this was to have the last cells in the sequence be on the right hand side before the loop started again. It mostly worked, but the reason for backtracking now fails me.

On Mon, 12 Apr 2021, 21:59 Ivan Lucci, @.***> wrote:

Hello,

Have you found a solution for this @McGern https://github.com/McGern ?

I'm not using 'groupCells' option, but i'm facing the same problem here... I tried to remove all CSS styles but the problem keeps... seems to be a bug of this component.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/theolampert/react-flickity-component/issues/117#issuecomment-818233016, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS4IXQA7IUVHQ4MW66Y6XTTINNKBANCNFSM4U5GHWTQ .

yaodingyd commented 5 months ago

a updated sandbox to reproduce bug https://codesandbox.io/s/react-flickity-wrap-around-bug-jp8jgv