carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
97 stars 138 forks source link

Data grid: Date widget and select are not on the same z-index #6083

Open rodet opened 1 month ago

rodet commented 1 month ago

Package

Carbon for IBM Products

Description

When opening a date selector and a select widget on the editable data grid at the bottom of the content, they behave differently.

The date is hidden behind the table frame, while the selection is above the frame:

Screenshot 2024-09-19 at 15 16 16 Screenshot 2024-09-19 at 15 16 31

Component(s) impacted

Editable DataGrid

The problem is reproduceable on the last line of https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid-editablecell--editable-cell-usage-story&globals=viewport:basic

Browser

Safari

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v2.50.0-rc.0

Suggested Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IBM Controller

CodeSandbox or Stackblitz example

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid-editablecell--editable-cell-usage-story&globals=viewport:basic

Steps to reproduce the issue (if applicable)

Click the date and the multi select on the last line of an editable data grid, like this one https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid-editablecell--editable-cell-usage-story&globals=viewport:basic

Release date (if applicable)

No response

Code of Conduct

devadula-nandan commented 1 month ago

Just adding a quick note for anyone picking this up:

the select cell used to have the same unwanted overflow behavior as DatePicker until this upgrade was added, which introduces autoAlign prop from carbon to handle all the overflow issues. now we need to find a way to do something similar to DatePicker.