[SAFARI] Grid - Using select inside a grid editing template expands the row height to the select dropdown size

[mddragnev]

Open https://infragistics.com/angular-demos/grid/grid-select in safari. Enter edit mode from the second cell. Observe that the row height is expanded to fit the dropdown.

Note that this is reproducible only in Safari. In other browers it looks OK.

Sample is in this section https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing#cell-editing-templates

[mddragnev]

I noticed the issue is related to a custom class applied to the igx-select used inside the inlineEditor:

.cell-select {
    width: 100%;
    height: 100%;
}

After investigating, here’s what is actually happening:

1. The problem occurs in the overlay service when it moves the igx-select dropdown panel from its original parent into the overlay container.
2. In combination with the grid theme styles (which set the input group inside igx-select to height: 100%) and the .cell-select class above, Safari incorrectly calculates the height of the igx-select component.
3. Only in Safari, when the dropdown is moved out of the igx-select, the browser fails to trigger a layout recalculation. As a result, the igx-select retains the height it had while the dropdown was still inside it. This causes the grid row to grow unexpectedly.
4. Removing the height: 100% rule from .cell-select allows Safari to correctly recalculate the height when the dropdown is moved, which prevents the row from expanding.

[dkamburov]

Sounds like an easy fix within the samples, let's fix it in the samples.