[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?

no

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.

[joriverm]

@Nianwei : i would expect a overflow to not be needed here. i would expect the popup to be above the grid, so it does not need an overflow

@chrisdholt : any update on this ? is this being investigated/planned/...?

[FelipeCostaGualberto]

Hi, any updates regarding on this? This issues invalidates using a combobox inside a fluent-data-grid. A workaround is appreciated, since I couldn't find one inspecting the HTML.

EDIT: Removing the overflow: hidden from fluent-data-grid-cell made the dropdown items visible. Maybe this will help someone.

[joriverm]

keep open

[joriverm]

keep open - unknown when it'll be fixed, if it'll be fixed and if its still there in the new webcomponents...

[FelipeCostaGualberto]

@joriverm did you see my workaround?

[joriverm]

ye i did. we are currently no longer using fluentui because of the issues/terrible response from the webcomponents team. i didn't get to test the workaround, but a permanent fix seems like a better thing to have.

[sybren2]

@FelipeCostaGualberto Thank you for providing the workaround, it was very helpful! 🙏

We do hope this issue will get resolved in the future.