search

chris-m92 / react-leaflet-custom-control

React Leaflet v3 custom control
MIT License
22 stars 6 forks source link

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

Closed Phillip2025 closed 1 year ago

Phillip2025 commented 1 year ago

When hiding a control the app crashes showing the mentioned error. I checked with old versions and the bug starts to appear on the 1.3.2 version, up to the newest 1.3.4

I already created a codesandbox with a check to hide the control and make the bug to appear: https://codesandbox.io/s/react-leaflet-custom-control-forked-pgkqfe?file=/package.json

To see the right behaviour, change the version of the package to 1.3.1 and uncheck again

chris-m92 commented 1 year ago

@Phillip2025, I'm sorry you've been running into this issue. v1.3.2 fixed an issue that caused recurring <div> tags to be constantly added to the DOM on each render. I checked out your CSB, thanks for building that. A workaround is to not remove the <Control> component, but remove the children of <Control>. You won't run into crashes on ^1.3.2 any more.

For example, from your code, 

<Control position="topright">
  {checked && (
    <ButtonGroup orientation="vertical" variant="contained">
      <Tooltip placement="left" title="Fullscreen"> 
        <Button color="inherit">
          <FullscreenIcon />
        </Button>
      </Tooltip>
    </ButtonGroup>
  )}
</Control>
Phillip2025 commented 1 year ago

Thanks for the response, it works perfectly this way