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

[McGern]

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]

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]

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 <#117 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAS4IXQA7IUVHQ4MW66Y6XTTINNKBANCNFSM4U5GHWTQ> .

[yaodingyd]

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