Select component is hidden inside DataGrid

[agieralt]

Describe the bug Posted here: (https://vonage.slack.com/archives/C013F0YKH99/p1642607108078600) Select component, when expanded, is completely hidden inside cell of DataGrid.

To Reproduce Steps to reproduce the behavior:

1. Create DataGrid component
2. Create CellRenderer that shows Select component
3. Click on Select

Expected behavior I'd like to see expanded list of Select. (like in native one)

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 97.0.4692.71

[agieralt]

I've also tried to fix this with code that @k-paxian shared with me. Although it helped in his case, did not resolve mine :(

`const createVaadinGridStylePatchElement = () => {
  // This patch is needed to show slider tooltips uncropped by the grid
  const styleElement = document.createElement('style')
  styleElement.innerHTML = `
    #header {
      z-index: 0;
    }
    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
      overflow: visible;
    }`
  return styleElement
}

export const vwcDataGridRefFunction = gridElement =>
  setTimeout(() => {
    gridElement?.shadowRoot
      .querySelector('vaadin-grid')
      .shadowRoot.append(createVaadinGridStylePatchElement())
  }, 0)`

[rachelbt]

For vivids: there are actually 2 issues that are causing it:

1. the TD has overflow-hidden that hides the select.
2. each TR is positioned absolute - that causes a new layer stacking to each TR

[agieralt]

Thank you!! @rachelbt Looks promising, after changing both properties looks like this: Do you know what I could do to prevent Selects from hiding opened lists?

[yinonov]

⚠️ meddling with the style may introduce other layout / styling bug

see openui/open-ui#443

[rachelbt]

Thank you!! @rachelbt Looks promising, after changing both properties looks like this: Do you know what I could do to prevent Selects from hiding opened lists?

I wasn't suggesting a solution but pointing out the issue here when the bug will be tended :)