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

[ticket-sync[bot]]

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.)

[GCHQ-Developer-741]

Due to the issue involving third-party components, investigate whether this is something we can fix

[MI6-255]

We discussed in refinement that the suggested fix may break styling for the data table as a whole

[MI6-255]

We agreed to check this works with IcSelect different sizes