Skip to content

fix: ensure popover components anchor within the same local tree as the trigger - #8096

Draft
edleeks87 wants to merge 3 commits into
masterfrom
popover-landmarks
Draft

fix: ensure popover components anchor within the same local tree as the trigger#8096
edleeks87 wants to merge 3 commits into
masterfrom
popover-landmarks

Conversation

@edleeks87

Copy link
Copy Markdown
Contributor

fix #7789

Proposed behaviour

Adds portalTarget to internal Popover component and ensures that ActionPopover and PopoverContainer utilise this to render the popover in the same local tree as the trigger/target element.
If they're rendered in a modal they will anchor within that local tree, if not they will anchor to the portalTarget or to the body as a fallback

Current behaviour

Portal/Popover based components anchor to the document.body if they're not rendered in a modal

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Unit tests added or updated if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Additional context

Testing instructions

) => {
const focusableElements: Element[] = Array.from(
document.querySelectorAll(defaultFocusableSelectors) ||
/* istanbul ignore next */ [],

@tomdavies73 tomdavies73 Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

question: do we need this empty array here and the Istanbul ignore?

I've pulled this down locally and removed it, and it appears to be okay from a TS perspective

@tomdavies73 tomdavies73 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one question from me, rest looks spot on 👍

Comment thread src/components/popover-container/popover-container.component.tsx
Comment thread src/components/popover-container/popover-container.component.tsx
@edleeks87
edleeks87 force-pushed the popover-landmarks branch from f7f75ec to 81783ac Compare July 31, 2026 13:27
ibutakova
ibutakova previously approved these changes Jul 31, 2026
tomdavies73
tomdavies73 previously approved these changes Aug 3, 2026
@edleeks87
edleeks87 dismissed stale reviews from tomdavies73 and ibutakova via d2ab56e August 5, 2026 10:55
@edleeks87
edleeks87 marked this pull request as ready for review August 7, 2026 08:37
@edleeks87
edleeks87 requested review from a team as code owners August 7, 2026 08:37
@edleeks87
edleeks87 marked this pull request as draft August 7, 2026 08:40
…he trigger

adds `portalTarget` to internal `Popover` component and
ensures that `ActionPopover` and `PopoverContainer` utilise
this to render the popover in the same local tree as the
trigger/target element

fix #7789
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

Wrap action popover component with carbon portal wrapper & data-role

3 participants