CellHeader dropdown floats above the sidebar

[asharonbaltazar]

Description

The <CellHeader /> dropdown appears above the sidebar

Expected behavior

The dropdown should slide underneath the menu.

To Reproduce

Open a dropdown and scroll left.

Environment

• OS: Windows 10 21H1
• Browser: Edge (Chromium)
• Browser Version: v92

Additional context

[asharonbaltazar]

Assuming issues can be fixed in semi-related features, I can fix this in my PR (#584)

[pavish]

@asharonbaltazar This issue can be taken up and fixed separately. Thanks for reporting this!

[asharonbaltazar]

Can I take it then? Please assign it to me.

[kgodey]

@asharonbaltazar Sure, assigned to you, thanks!

[asharonbaltazar]

Would you want to dropdown to slide only underneath the menu? Or the cell indexes as well?

[pavish]

@asharonbaltazar I presume for positioning the dropdown, you are passing down the target to the portal action.

In this particular case, it's okay for the dropdown to not slide under the cell indexes.

[pavish]

Suggestions to fix this issue

This issue is a side-effect of the dropdown attaching by default to the body. This ensures it always appears over other elements.

There are two ways, this can be resolved:

1. For this particular case, the dropdown can be attached to the table wrapper or the header element. We can specify the parent (header) as reference to the portal action. This has to be passed down to the dropdown and then to the portal action.
2. The simpler approach, which I recommend: Hide the dropdown when column header is not visible. It can be done using css. Refer: https://popper.js.org/docs/v2/modifiers/hide/

Either of these approaches should only be applied on the column dropdowns, and not commonly to the dropdown component.

[seancolsen]

I'm closing because this will be irrelevant when we implement the Table Inspector.