search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://carbon-for-ibm-products.netlify.app/
Apache License 2.0
90 stars 131 forks source link

Datagrid[Filtering]: dropdown not visible because of stacking context issue #3976

Open matthewgallo opened 7 months ago

matthewgallo commented 7 months ago

What package(s) are you using?

Detailed description

Describe in detail the issue you're having.

If a dropdown filter is included in the Datagrid filter panel, it is not visible when open due to stacking context issues, until Carbon includes floating-ui for components like Dropdown, OverflowMenu, other Menus, we should come up with a temporary solution so that dropdowns can be used in the filter panel.

Is this issue related to a specific component?

Datagrid filter panel, dropdowns

What did you expect to happen? What happened instead? What would you like to see changed?

Expected to be able to view dropdown items when opened

What browser are you working in?

Chrome

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

N/A

Steps to reproduce the issue

  1. Open status dropdown from Datagrid filter panel, notice how the chevron changes from closed position to open but the menu items are not visible.
elycheea commented 7 months ago

Suggestion from @matthewgallo could try to use portals to keep dropdowns visible until floating UI is visible.

elycheea commented 6 months ago

Continuing to explore floating-ui alongside Carbon as a way to resolve this.