Widget Cleanup Throws Error

747
1
Jump to solution
02-05-2021 11:51 AM
developerarce
New Contributor III

Following this guide: Feature Filters 

When moving to another route (react) or effectively "cleaning up", I get thrown the following error in console.

 

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

 

 
If I remove the line of code `view.ui.add(filterExpand, "top-left");` then I have no issues. I am not sure what I am doing wrong, because the guide above has no explicit cleanup.

My code:

 

const Map = (props: any) => {
  const classes = useStyles();
  const mapDiv = useRef(null);

  useEffect(() => {
    if (mapDiv.current) {
      const filterStuff = (stuff: any, view: any) => {
        const data = stuff.getAttribute("data-stuff");

        // const test =
        view.filter = new FeatureFilter({
          where: `stuff='${data}'`
        })

        props.handleStuff(data);
      }

      const renderer = ...

      const geoJSONLayer = new GeoJSONLayer({
        url: ...,
        renderer: renderer,
        outFields: ["*"]
      });

      const map = new ArcGISMap({
        basemap: "topo",
        ground: "world-elevation",
        layers: [geoJSONLayer]
      });

      const view: any = new SceneView({
        container: mapDiv.current!,
        map: map,
        camera: {
          position: {
            ...
          },
          tilt: 0
        }
      });

      const filterElement = document.getElementById("stuff-filter");

      view.whenLayerView(geoJSONLayer).then(function(layerView: any) {
        // set up UI items
        if (filterElement) {
          filterElement.addEventListener("click", function(event) {
            filterStuff(event.target, layerView);
          });
          filterElement.style.visibility = "visible";
          const filterExpand = new Expand({
            view: view,
            content: filterElement,
            expandIconClass: "esri-icon-filter",
            group: "top-left"
          });
          //clear the filters when user closes the expand widget
          filterExpand.watch("expanded", function () {
            if (!filterExpand.expanded) {
              layerView.filter = null;
              props.handleStuff(null);
            }
          });
          view.ui.add(filterExpand, "top-left");
        }
      });
    }
  }, []);

  return (
    <>
      <div id="stuff-filter" className={classes.filter}>
        {items.map((item, index) => (
          <div className={`FilterItem ${classes.filterItem}`} data-stuff={item}>{item}</div>
        ))}
      </div>
      <div className={classes.mapImage} ref={mapDiv}></div>
    </>
  );
}

 

 

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
developerarce
New Contributor III

Solution:

Before

<>
  <div id="stuff-filter" className={classes.filter}>
        {items.map((item, index) => (
          <div className={`FilterItem ${classes.filterItem}`} data-stuff={item}>{item}</div>
        ))}
  </div>
  <div className={classes.mapImage} ref={mapDiv}></div>
</>

 
After

<>
  <div className={classes.mapImage} ref={mapDiv}>
    <div id="stuff-filter" className={classes.filter}>
        {items.map((item, index) => (
          <div className={`FilterItem ${classes.filterItem}`} data-stuff={item}>{item}</div>
        ))}
    </div>
  </div>
</>

View solution in original post

0 Kudos
1 Reply
developerarce
New Contributor III

Solution:

Before

<>
  <div id="stuff-filter" className={classes.filter}>
        {items.map((item, index) => (
          <div className={`FilterItem ${classes.filterItem}`} data-stuff={item}>{item}</div>
        ))}
  </div>
  <div className={classes.mapImage} ref={mapDiv}></div>
</>

 
After

<>
  <div className={classes.mapImage} ref={mapDiv}>
    <div id="stuff-filter" className={classes.filter}>
        {items.map((item, index) => (
          <div className={`FilterItem ${classes.filterItem}`} data-stuff={item}>{item}</div>
        ))}
    </div>
  </div>
</>
0 Kudos