How to use `mountingNode` param

[Ashley Claasen]

Hello, thank you so much for the package, it's awesome. 💪

I'm running into a little issue. I'd like to mount the confirmation modal to existing components. When testing, they and their children are removed during cleanup, but the document root is not cleaned for optimization reasons. This unfortunately causes modals to persist between tests until their unmount delay is reached.

I'd like to use the mountingNode param to ensure these modals are cleaned up during cleanup, but I unfortunately haven't managed to get that param to work.

Following the examples in the README at #create-confirmable-component and #create-confirm-function, here is an excerpt of my code:

const confirm = (message, node, options = {}) =>
  createConfirmation(ConfirmModal, 1000, node)(message, { options });

const Component = () => {
  const ref = useRef(null);
  
  const handleModal = async () => {
    const confirmed = await confirm(
      { confirmation: "Are you sure?" },
      ref.current
    );
    
    if (confirmed) doSomething();
  }

  return (
    <div ref={ref}>
      <Button onClick={handleModal} />
    </div>
  );
};

When I click on the button & the modal is shown, an empty <div></div> is appended to the DOM of the Component, but the modal itself still appears to be appended to the document root. After closing the modal, the following error appears in the browser console:

Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node | createConfirmation.js:44

If it matters any, the modal I am using is an implementation of react-bootstrap's Modal component. I am using React 17 with react-confirm 0.1.24.

Let me know if I can provide any more useful information or help in any other way! Once I got this figured out I'd love to draft up a PR adding documentation of what I've learned.

[KunihikoHarada]

Thanks for reporting this issue. Fixed on #46.

It also merged to v0.1.27 so please check it out!

but the modal itself still appears to be appended to the document root

This is how react-bootstrap shows modal dialog. It also appends a DOM to document root itself.

[Ashley Claasen]

Seems to work excellently 👌 👌

Opened modals still persist into the next spec due to the behavior of react-bootstrap, but I don't really see an easy way to fix that 😬

Closing the opened modal at the end of a spec does seem to prevent it from persisting into the next one.

Thank you for the quick fix!