With the cellSelector option, Flickity changes the DOM outside React. It moves all the non-cell nodes outside of the carousel.
This DOM mutation breaks the reconciliation of React when it tries to unmount a subtree with Flickity in it.
It does not break if the Flickity component has no children or if all of its children match the specified cellSelector. In these cases the above mentioned DOM mutation does not happen.
Suggestions:
document this issue in the readme
do not pass the cellSelector option to Flickity, effectively disabling this option
TypeScript: remove the option entirely or add a warning to the type description
Below an example of the bug. Toggle the appearance of Flickity using the button. You should see an error in the sandbox browser window and console.
https://codesandbox.io/s/react-flickity-4zu6l
Dependencies:
I believe the issue is the following:
With the
cellSelector
option, Flickity changes the DOM outside React. It moves all the non-cell nodes outside of the carousel.This DOM mutation breaks the reconciliation of React when it tries to unmount a subtree with Flickity in it.
It does not break if the Flickity component has no children or if all of its children match the specified
cellSelector
. In these cases the above mentioned DOM mutation does not happen.Suggestions:
cellSelector
option to Flickity, effectively disabling this option