fix(react-drag-drop): support dynamic root element IDs in DragDropCon…

[arpanroy41]

Fixes #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.

Summary by CodeRabbit

• Bug Fixes
  • Improved drag-and-drop overlay mounting by dynamically locating the app root for portal creation, ensuring overlays render correctly across different project setups and build configurations.

[coderabbitai]

Walkthrough

Replaced the hardcoded portal target lookup with a dynamic root element resolution that searches common root IDs ('root', 'app', 'main', '__next') and falls back to document.body; uses useMemo to compute rootElement and targets it for the drag overlay portal when canUseDOM is true.

Changes

Cohort / File(s)	Summary
Dynamic Root Element Lookup packages/react-drag-drop/src/components/DragDrop/DragDropContainer.tsx	Added useMemo-backed rootElement to locate a React root by checking IDs (root, app, main, __next) with fallback to document.body; replaced document.getElementById('root') with this computed rootElement for overlay portal target.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• thatblindgeye
• wise-king-sullyman

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: supporting dynamic root element IDs in DragDropContainer instead of hardcoded root, which is the primary objective of this PR.
Linked Issues check	✅ Passed	The PR fully addresses the requirements from issue #12217: implements dynamic root element lookup supporting common IDs ('root', 'app', 'main', '__next') with document.body fallback, enabling components to work regardless of host application's root element ID.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objective of supporting dynamic root element IDs in DragDropContainer. The addition of useMemo and rootElement lookup is precisely scoped to address issue #12217 without introducing unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[patternfly-build]

Preview: https://pf-react-pr-12240.surge.sh

A11y report: https://pf-react-pr-12240-a11y.surge.sh

[coderabbitai]

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 getElementById is fast and the canUseDOM guard 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.

[coderabbitai]

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.

[arpanroy41]

@nicolethoen Can you please rerun the upload accessibility results and upload documentation actions?