yaodingyd/react-flickity-component

cellSelector options breaks React on unmounting

anadutova opened this issue · 1 comments

anadutova commented

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:

  • 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
yaodingyd commented

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