New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(react): inline overlays can be conditionally rendered #26111
Conversation
6ddb0f6
to
48a53d9
Compare
Co-authored-by: liamdebeasi <liamdebeasi@users.noreply.github.com>
919bd49
to
50fa677
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
- Go to http://localhost:3000/overlay-components/modal-conditional
- Click "Render Modal".
- Click "Close" in the modal.
- Observe that the
ion-modal
is still in the DOM inside ofion-content
.
I think this is re-inserting the modal back into the DOM:
Reference.parentNode.insertBefore(BaseComponent, Reference); |
Interesting development.. rendering the inline overlay within a 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job!
Pull request checklist
Please check if your PR fulfills the following requirements:
ionic-docs
repo, in a separate PR. See the contributing guide for details.npm run build
) was run locally and any changes were pushednpm run lint
) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
What is the current behavior?
Developers that attempt to conditionally render an inline overlay (modal/popover) will receive the following exception:
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
andIonPopover
can be conditionally rendered.IonModal
andIonPopover
will not throw exceptions when sibling content is dynamically rendered before its node.Does this introduce a breaking change?
Other information
Dev-build:
6.3.2-dev.11665775983.1431d442
This is an alternative approach to: #25663