bug: using a fragment with IonCard and IonModal results in error after upgrading to ionic 6

[ldikmans]

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

Current Behavior

A Fragment with an IonCard and an IonModal. The modal contains a button that will close the modal AND hide the card.
Click on the Button
Observed behavior: white 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

Expected behavior:
modal closes and card is hidden.

It works when not using a fragment, but moving the modal to the container the card is defined in. However we want to reuse this card in several places in our app.
In previous versions this setup worked as expected. (Ionic 5)

Steps to Reproduce

Create a fragment with an IonCard and an IonModal.
Add a button on the modal that will close the modal and hides the card.
add the fragment to a container.

Run the code with developer console open

click on the card to open the modal
click on the button to close the modal and hide the card.

Code Reproduction URL

https://github.com/ldikmans/FragmentBug

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.0.10

Capacitor:

Capacitor CLI : 3.4.3
@capacitor/android : 3.4.3
@capacitor/core : 3.4.3
@capacitor/ios : 3.4.3

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.13.1 (/usr/local/Cellar/node@16/16.13.1/libexec/node)
npm : 8.1.2
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. In Ionic 6 we updated ion-modal and ion-popover to work declaratively in your template. This means that when you write <IonModal> in your template you are initializing an instance of the <ion-modal> component. In Ionic 5, the IonModal component was a wrapper for the modal controller that would programmatically create/destroy an <ion-modal>.

In your application, the modal starts inside of a Fragment in the FragmentWithCardAndModal component. When you present the modal, the modal moves from inside of that component to the root of your application. This allows the modal to overlay your entire application. When the modal is dismissed, it should be moved back inside of the fragment.

Clicking the button destroys the fragment, leading React to try and destroy ion-modal because it thinks it is a child of the fragment. This leads to the error you received because ion-modal was moved outside of your fragment.

For this use case, I think it would be better to use Overlay Hooks. This is the same <ion-modal> component, but the difference is that it is not added to the DOM until you present it. As a result, the modal is never added as a child of your fragment. Can you try the overlay hook and let me know if that fixes the issue?

[ldikmans]

Hi,

I have updated the sample app. It works when I use useIonModal, I no longer have the error.

However, I have two other challenges in this case:

• a memory leak when I use a state to hide the card. I have a workaround to set the card.style.display='none'.
• We card modals in iOS mode that have the ability to be presented in a card-style and swiped to close. I am not sure how to solve that when using the overlay hook.

[liamdebeasi]

Can you provide an example of the memory leak?

The overlay hook accepts the same properties as IonModal. So you would still set swipeToClose: true and pass your reference element to presentingElement.

[ldikmans]

Yes, it is in the code base: https://github.com/ldikmans/FragmentBug

I added a fourth card that has the memory leak

adding the properties I will need to figure out, do you have an example?