fix(react-drag-drop): support dynamic root element IDs in DragDropCon…#12240
Open
arpanroy41 wants to merge 3 commits intopatternfly:mainfrom
Open
fix(react-drag-drop): support dynamic root element IDs in DragDropCon…#12240arpanroy41 wants to merge 3 commits intopatternfly:mainfrom
arpanroy41 wants to merge 3 commits intopatternfly:mainfrom
Conversation
…tainer Fixes patternfly#12217 - Replace hardcoded document.getElementById('root') with dynamic root element lookup - Add getRootElement() helper that tries common root IDs: 'root', 'app', 'main', '__next' - Fallback to document.body if no common root element is found - Enables usage in applications with non-standard root element IDs (e.g., id="app") This fix allows OCP 4.22 and other applications to use @patternfly/react-drag-drop regardless of their React root element configuration.
WalkthroughReplaced the hardcoded portal target lookup with a dynamic root element resolution that searches common root IDs ('root', 'app', 'main', '__next') and falls back to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Collaborator
|
Preview: https://pf-react-pr-12240.surge.sh A11y report: https://pf-react-pr-12240-a11y.surge.sh |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx`:
- Around line 293-304: Replace the fragile getRootElement() guessing logic with
a deterministic optional portalContainer prop: add portalContainer?: HTMLElement
to the component props/interface for DragDropContainer, update the
DragDropContainer function signature to accept this prop, remove or stop calling
getRootElement(), and use (portalContainer ?? document.body) wherever
getRootElement() was used to determine the portal target; this mirrors
PatternFly's appendTo behavior and keeps document.body as the default fallback.
🧹 Nitpick comments (1)
packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx (1)
317-317:getRootElement()is invoked on every render, performing DOM lookups each time.While
getElementByIdis fast and thecanUseDOMguard correctly prevents SSR issues, the deeper problem is that the portal target discovered here may be a non-root element (see the comment above on'main'). Once the approach is changed to a prop-based solution, this line becomes clean and efficient.
packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
Outdated
Show resolved
Hide resolved
nicolethoen
reviewed
Feb 6, 2026
packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx`:
- Around line 294-305: The useMemo that computes rootElement currently accesses
document.getElementById and will crash during SSR; modify the rootElement
computation (the useMemo block that defines rootElement) to first check the
existing canUseDOM guard and return null (or document.body only when canUseDOM
is true) when DOM is unavailable so no document.* calls run on the server; keep
the later createPortal usage that already checks canUseDOM intact so the
component renders safely during SSR.
…rning null for root element
Contributor
Author
|
@nicolethoen Can you please rerun the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #12217
This fix allows OCP 4.22 and other applications to use @patternfly/react-drag-drop regardless of their React root element configuration.
Summary by CodeRabbit