fix: Default to OwnerDocument for Portal Container#214
Conversation
NathanZlion
requested review from
a team and
jperals
and removed request for
a team
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #214 +/- ##
=======================================
Coverage 98.90% 98.90%
=======================================
Files 44 44
Lines 1185 1190 +5
Branches 319 321 +2
=======================================
+ Hits 1172 1177 +5
Misses 12 12
Partials 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| }, [container, getContainer, removeContainer]); | ||
|
|
||
| return activeContainer && createPortal(children, activeContainer); | ||
| if (!activeContainer) { |
There was a problem hiding this comment.
Portal needs to which document to append to and React doesn't give us that because it hasn't mounted yet. So we see activeContainer is not there and we render the hidden span which mounts, then ownerDocument is read then we create the real container.
There was a problem hiding this comment.
OK. Can we add a comment explaining that?
Different question: what is the reason of the second part which was added to the condition, && typeof document !== 'undefined'?
There was a problem hiding this comment.
The typeof document !== 'undefined' is for SSR. We had SSR tests that were failing. Old portal returned null if no active document present so it was okay. Now we return the span but if it's on the SSR side we shouldn't until browser renders and document gets defined.
2 participants
When container is not provided the Portal is created in the top most document of the window resulting in broken experience with out components when used in an iframe. Instead of fixing each case of Portal use fixing the issue here by making default behavior to go for the owner document for portal div creation.
Issue #, if available:
Description of changes:
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.