Skip to content

PopoverContainer does not close on outside click when used inside FlatTable #7680

@manuela-sage

Description

@manuela-sage

Description

I’m experiencing an issue when using the PopoverContainer component inside a FlatTable.

Expected behavior:
The popover should close automatically when clicking outside of the PopoverContainer.
Actual behavior:
When the component is rendered inside a FlatTable, clicking outside the popover does not close it.

Additional context:
This appears to be a regression introduced in version 151.2.3.
In that version, scrolling inside FlatTable was disabled while a Carbon popup is open to prevent a layout issue.
As a side-effect of that change, this particular scenario seems to be unaccounted for, causing the outside click to no longer dismiss the popover.

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-pusyb5nj?file=src%2FApp.tsx

Steps to reproduce

  1. Render a FlatTable component.
  2. Place a PopoverContainer inside one of the table cells.
  3. Open the popover.
  4. Click anywhere outside of the PopoverContainer.

JIRA ticket numbers (Sage only)

No response

Suggested solution

No response

Carbon version

158.14.2

React version

v17

Design tokens version

No response

Relevant browsers

Other, Chrome

Relevant OSs

MacOS

Assistive technologies

No response

Additional context

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions