fix(react): inline overlays can be conditionally rendered

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Developers that attempt to conditionally render an inline overlay (modal/popover) will receive the following exception:

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

This exception also occurs when inline overlays are rendered as a sibling after dynamically rendered React elements.

Issue URL: #25590

What is the new behavior?

• IonModal and IonPopover can be conditionally rendered.
• IonModal and IonPopover will not throw exceptions when sibling content is dynamically rendered before its node.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 6.3.2-dev.11665775983.1431d442

This is an alternative approach to: #25663

[liamdebeasi]

In the overlay-components/modal-conditional test, the modal is being re-created multiple times:

It also looks like the overlayId is being incremented too many times, (notice it increases by 4 every time)

Steps to reproduce:

1. Go to http://localhost:3000/overlay-components/modal-conditional
2. Click "Render Modal".
3. Click "Close" in the modal.
4. Observe that the ion-modal is still in the DOM inside of ion-content.

I think this is re-inserting the modal back into the DOM:

ionic-framework/core/src/utils/framework-delegate.ts

Line 124 in 5676bab

Reference.parentNode.insertBefore(BaseComponent, Reference);

[sean-perkins]

Interesting development.. rendering the inline overlay within a template element solves most issues. By having a consistent DOM node that isn't moved, React is able to correctly handle conditional rendering and dynamic nodes surrounding the element. We then teleport the overlay from the template to the root, when presented, but still keeping the original node in tact.

The only challenge I continue to face, but is extremely minor in my opinion, is the assigned overlay ids. When not conditionally rendering, overlay ids are persistent and correct. When conditionally rendering, when the overlay is unmounted, it is relocated in the DOM (I believe from React, after disabling the delegate), this causes the connectedCallback to fire for the overlay and the id is incremented. This creates the following pattern when presenting a conditionally rendered overlay: ion-overlay-1, ion-overlay-3, etc.

[liamdebeasi]

Great job!