yaodingyd / react-flickity-component

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

cellSelector options breaks React on unmounting #100

Closed anadutova closed 1 year ago

anadutova commented 4 years ago

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.

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

https://codesandbox.io/s/react-flickity-4zu6l

Dependencies:

"flickity": "2.2.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-flickity-component": "3.5.0",
"react-scripts": "3.4.1"

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:

yaodingyd commented 3 years ago

I can't reproduce any error in your sandbox. @anadutova Can you confirm if this is still an issue?