search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.83k stars 1.81k forks source link

[Bug]: Popover is clipping in a modal #17749

Open georgespano opened 5 days ago

georgespano commented 5 days ago

Package

@carbon/react

Browser

Chrome

Package version

1.68.0

React version

18.3.1

Description

Opening a popover inside a modal results in the content being clipped. The alignment setting is also not being respected most likely due to the underlying issue causing the clipping.

Image

Using a toggle tip, I do not see the same issue.

Image

Hacky work-around: On the element with the cds-popover class if you add a css styleposition: fixed it forces the popover to break out of the clip. However, it doesn't truly fix the underlying issue and popover positioning based on the parent does not work (ie. align: left).

Reproduction/example

https://stackblitz.com/edit/github-ukeceq?file=src%2FApp.jsx

Steps to reproduce

  1. Open the reproduction example
  2. Click the open modal button
  3. In the modal, click the "Popover" button.

Result: the popover which appears is clipped in the modal - notice the red border which encloses the "I am some content" popover is clipped Expected: the popover is not clipped.

Notice clicking the toggle tip text shows the same popover as expected (ie. not clipped).

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

Automation Builder Workflow Designer

Code of Conduct

tay1orjones commented 5 days ago

@preetibansalui do you have any thoughts on why the Toggletip is working correctly in this situation whereas the Popover does not? The HTML between the two does not have much of a diff other than a couple classes and an extra div around the content div in Toggletip.

Image