Internal issue 2992 - Select component creating extra scrollbars rather than overflowing

We have an IcDataTable in which we want to render IcSelect components in some of the cells. Due to a separate (reported, now known) issue with IcSelect, we opted to use a MUI Autocomple component instead of an IcSelect in the interim. (The two are functionally similar.)

Unlike with IcSelect, the Autocomplete component _does_ expand beyond the bounds of the parent cell.

However, it does _not_ expand beyond the bounds of the table itself - so when there are only a small number of rows in the table, a scrollbar appears for the table, in addition to the usual one for the Autocomplete component itself. (Please see the screenshot attached.)

I think the fix may actually be very simple. Within the Shadow DOM for the IcDataTable, there is a div with class {{table-row-container}}. This currently has a CSS property {{overflow: auto}}. Disabling this CSS property (or changing its value to {{visible}}) seems to fix the issue. We have tried this using browser developer tools, but we are not able to make this persist for us, due to the property being within a Shadow DOM.

Please could the ICDS team update that property for us?

(Please note also: we might expect the issue to always present itself whenever there’s an Autocomplete component in the last few rows of the table. But that’s not always the case. If the table has many rows and the last few rows are shown on the bottom half of the screen, then the Autocomplete component opens _upwards_ rather than downwards, so the issue we’re describing can be hidden by that behaviour.)

Inspect the IcDataTable Shadow DOM styles and locate the table-row-container element with overflow: auto. Reproduce the issue with a MUI Autocomplete in a lower table cell, then verify that the table no longer gains an extra scrollbar while the Autocomplete can overflow its bounds.

Written by the indexing model from the issue text.