1. Home
  2. Forum
  3. React - EJ 2
  4. Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node when setState

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

Hi Syncfusion Team

I have Tooltip component which have uses content template to hold ListViewComponent. The tooltip component also uses opensOn='Custom', click button to open, select an item from the ListViewComponent, setState and close tooltip.

However, setState is triggered, the error (as shown in the title) appears when tooltip close method is triggered.

How do i go about resolve this issue?

I have attached the codesandbox for your reference.

https://codesandbox.io/s/reverent-cloud-vek3j?file=/src/App.tsx:777-804


thanks


4 Replies
MK Muthukrishnan Kandasamy Syncfusion Team October 18, 2021 03:33 PM UTC

 
Hi Amanda, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your reported problem in the Syncfusion React Tooltip component. On further analysis, we have found that this is a common issue in React. This issue occurs only when we close the Tooltip component from the ListView select event. For your requirement to hide the Tooltip, we can customize the hide and show behavior by using CSS styles. 
 
For your convenience, we have modified your shared sample. In this sample, we have added the custom cssClass for the Tooltip component, and we have added CSS styles for hiding the Tooltip. Based on the ListView select event and button click event we have added and removed the cssClass. 
 
Please refer to the below code snippet. 
 
[App.tsx] 
 
  const open = () => { 
    if (popoverRef.current !== null) { 
      popoverRef.current.open(); 
    } 
    if (popoverRef.current?.cssClass === "custom") { 
      popoverRef.current.cssClass = ""; 
    } 
  }; 
 
  const content = () => { 
    return ( 
      <ListViewComponent 
        dataSource={[ 
          { label: "Click One", count: "1" }, 
          { label: "Click Two", count: "2" } 
        ]} 
        fields={{ text: "label", id: "count" }} 
        select={(event) => { 
          if (popoverRef.current !== null && btnRef.current !== null) { 
            popoverRef.current.cssClass = "custom"; 
          } 
        }} 
        height="auto" 
       width="300" 
        showHeader={true} 
        headerTemplate="Commonly used" 
      /> 
    ); 
  }; 
 

[styles.css] 
 
.custom.e-popup.e-popup-open { 
  display: none; 
} 
 
 
 
Please refer to the below link for the modified sample. 
 
 
Description 
Link 
Getting started 
API reference 
Live demo 
 
Please refer to the below forum where the same issue is discussed. 
 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Muthukrishnan K 



NB Nicholas Barrow June 22, 2023 10:58 PM UTC

Stumbled across this experiencing the same issue, and it seems like the easiest solution is almost always, when able, to wrap Syncfusion React components in an empty `div`: https://stackoverflow.com/a/64768491/14717625


MB Martyn Billings replied to Nicholas Barrow February 10, 2025 11:58 AM UTC

Thanks buddy, this helped me get out of a whole.

I don't understand why it's a problem in 2025 to try and use fragments with this still. I would have expected syncfusion to fix it by now


LD LeoLavanya Dhanaraj Syncfusion Team February 13, 2025 12:44 PM UTC

Hi Martyn,


We would like to inform you that the issue occurs when dynamically change the target of the Tooltip when it’s in open state. Also, this error typically occurs when trying to remove a DOM element that is not actually a child of the parent node and calling removeChild on. We tried to replicate the issue with the latest version and unable to replicate the scenario.


Sample : https://stackblitz.com/edit/react-e1v3p3da-esocmujc?file=index.js


If you are still facing any issue, please share the issue replicating code snippets and steps to reproduce it on our end. This information will help us to validate and provide a prompt solution.


Regards,

Leo Lavanya Dhanaraj


Loader.
Up arrow icon