[Bug]: Popover is clipping in a modal

[georgespano]

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.

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

Hacky work-around:
On the element with the cds-popover class if you add a css style position: 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

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

@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.

[georgespano]

Thanks @preetibansalui for fixing this so quickly!
Will this make it into 1.69.0 release?