bug: Conditionally rendering ionModal in react - Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[corysmc]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Conditionally rendering an IonModal, breaks when dismissing when using ionic v6.

Observed behavior: white/blank screen.

Error in console:
react-dom.development.js:10301 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Expected Behavior

In an ideal scenario - the ionic modal could be conditionally rendered (without using the isOpen prop) this is a common pattern in react applications.

Steps to Reproduce

1. Conditionally render an IonModal

...
const [showIonModal, setShowIonModal] = useState(false);
...

return (
<div>
  <IonButton onClick={() => setShowIonModal(true)}>
    Show Modal
  </IonButton>
  {showIonModal && (
    <IonModal isOpen={true} onDidDismiss={() => setShowIonModal(false)}>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Content</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        Ionic Modal Content here!
        <IonButton color="danger" onClick={() => setShowIonModal(false)}>
          Hide Modal (will break)
        </IonButton>
      </IonContent>
    </IonModal>
  )}
</div>
)
...

2. Dismiss the modal (so that IonModal is pulled from the dom)
3. Observe the error.

Code Reproduction URL

https://github.com/corysmc/react-overlay-bug

Ionic Info

Ionic:

Ionic CLI : 6.15.0
Ionic Framework : @ionic/react 6.1.13

Utility:

cordova-res : not installed
native-run : 1.6.0

System:

NodeJS : v14.16.0
npm : 6.14.11
OS : macOS Big Sur

Additional Information

Related:
#24887

[sean-perkins]

@corysmc thanks for opening this issue!

I tried to recreate a similar example in Angular to see what the behavior was there. While it doesn't error out, it does highlight a few problematic side effects of conditionally rendering modals in this way.

1. There is no dismiss animation for the modal.
2. None of the dismiss behavior fires (no dismiss events are emitted).

Since the framework is performing the remove operation, a lot of internal behavior is skipped. Modal is not currently architected to perform expected dismiss behavior when the node is removed outside of calling dismiss() or performing specific actions.

I'll need to compare with React and another modal library implementation to see how they handle this. I'll also need to explore useIonModal more and see if that's a more applicable pattern for achieving this behavior.

[JohnGeorgiadis]

I am having the same issue. I have a list of items with ids and when I click on an item I open a modal passing this id. If the id is null I unmount the modal.

I get the same error when onDismiss is being fired. MESSAGE Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

 {selectedViewGroupId && (
        <GroupInfoModal
          handleDismissModal={() => setSelectedViewGroupId(null)}
          id={selectedViewGroupId}
          isOpen={!!selectedViewGroupId}
        />
      )}

this code was working on v5.

[corysmc]

@sean-perkins I understand that useIonModal is the way around the issue, however - this is a very common and preferred pattern for react applications. When using the hook useIonModal - in a full scale application you end up having to wrap every modal hook with providers to ensure it works properly. When using a conditionally rendered modal - all the providers are there.

Also, take a look at the linked repo - the dismiss animation still works because it's called in the useLayoutEffect callback that is called before unmounting 😁

https://github.com/corysmc/react-overlay-bug/blob/development/src/components/CustomModal.tsx

[sean-perkins]

Another issue popped up that we believe to be related to the problematic behavior here: https://github.com/jameson-w-taylor/modal-state-error

Rendering new child nodes before an inline modal, during the modal dismiss, causes the same exception as originally reported.

Over simplified code:

{items.map(item => <IonCard />)}
<IonModal ref={modal} onWillDismiss={() => {
  setItems(...items, 'Another one');
}}>
  <IonButton onClick={() => modal.current.dismiss()}>Close</IonButton>
</IonModal>

FYI we do consider this a bug, but leaving in triage status just to keep it top-of-queue to try and get a better grasp of where the root problem exists.

[Fooweb]

Hello! Just wondering when an update will be made to correct this. Thanks!

[sean-perkins]

Ok I have been able to diagnose the root issue and have a better understanding of the work effort to resolve it.

The IonModal implementation in React does not have a framework delegate configured. This results in us manually removing the element from the DOM, instead of relying on React to re-render and remove both the React component and the element from the DOM.

Fortunately, my recent work with implementing the framework delegate into React for IonNav overlaps with this.

I'll classify this now to get it into our backlog. I'll create a dev build if my quick exploration is successful.

[sean-perkins]

Here is a dev-build to test with: 6.1.16-dev.11658359881.12e9c6eb (Edit: dev build updated). Let me know your results. I verified both individual use cases reported in this thread.

[JohnGeorgiadis]

@sean-perkins it works now as in v5. Overlay shadow is a bit weird for me, but I need to check that I did everything from the migration guide. Thanks!

[sean-perkins]

@JohnGeorgiadis can you provide an image or screencast of the before & after?

[Fooweb]

Hi Sean,

Thank you for the update. I tried to install the dev build but it's not working, I'm sure I'm doing something wrong.

Can you or someone help me with the command to update/install the dev build?

Thank you!