[Bug]: combobox dropdown not fully visible in datagrid row/cell

[joriverm]

Library

Web Components (@fluentui/web-components)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 3.83 GB / 31.20 GB
  Browsers:
    Edge: Chromium (124.0.2478.51)
    Internet Explorer: 11.0.19041.3636
    Firefox : 125.0.3

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/joriverm/pen/LYoVNwm

Bug Description

Actual Behavior

the dropdown of the combobox is overlapped by the next row

this was originally reported in the blazor components, but was found to be a bug in the web components themselves : https://github.com/microsoft/fluentui-blazor/issues/880

Expected Behavior

combobox dropdown to be on top of the data grid row/cell

Logs

No response

Requested priority

High

Products/sites affected

internal client website, can not provide link

Are you willing to submit a PR to fix?

yes

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Nianwei]

This appears to applied to situation when it's parent container has "overflow:hidden" in style. Unfortunately developers that uses the Combobox may not have control over the parent container's style sheets, so the dropdown itself needs move out of the parent container from the DOM tree.