Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138192

React portal cannot be unmounted without non-react DOM parent - how can I unmount the portal manually before removing the parent?

$
0
0

I have a Blaze template application outside of the main react app that houses a container for a React portal to be rendered within it. On render of the Blaze template, we load data and send a custom event to an event listener inside the React application, which then renders the portal.

This works perfectly inside Chrome, but with Internet Explorer 11, the rendering and derendering of both the portal and template is a lot slower, and we run into a race condition??

On the second render of the Blaze template, React goes through its lifecycle and attempts to unmount all the children of the previous portal container, however - they do not exist since we've removed that DOM node entirely (using .html('')), and we run into an error within ReactDOM where the child is not found.

function removeChildFromContainer(container, child) {
  if (container.nodeType === COMMENT_NODE) {
    container.parentNode.removeChild(child);
  } else {
    container.removeChild(child); // Error on this line. 
  }
}

I've attempted to remove unmount the portal by sending a custom event before the existing code removes the DOM container.

    //Derender the previous portal if it exists
    if (window.isEvalTool) {
        console.log('removing the portal')
        // Send an event to React to unmount the previous portal node for IE
        var container = document.getElementById('eval-panel-root');
        var removePortal = new CustomEvent("readyForPortalRemoval", {
            detail: container
        });
        window.dispatchEvent(removePortal);
    }
    $(findingContainer).html('');


// Code that should unmount the component manually
        window.addEventListener('readyForPortalRemoval', function (event) {
            console.log('removing previous portal container');
            var removed = ReactDOM.unmountComponentAtNode(event.detail);
            console.log(removed); // This usually returns false, meaning it 
            // couldn't find it. 
        })

Right now the problem is that unmountComponentAtNode doesn't seem to work for my portal (which is a classical component) - even when passing the direct parent container. I thought it might be because events aren't guaranteed to fire immediately and so it might be looking for the container only after the .html('') call, but that isn't the issue, after placing the remove portal event right after the create portal event (no removal of html between those two calls).

Any information on how I can gracefully unmount and derender the portal before its parent container gets replaced by Blaze would be extremely helpful!

Thanks in advance.

I expected to at least have a successful removal of the portal at some point but have not. I cannot remove the html.('') call because that is how the current templating engine replaces templates.


Viewing all articles
Browse latest Browse all 138192

Trending Articles