Adding "auto" direction to OverflowMenu in DataTable

[GAUNSD]

Summary

When using the <OverflowMenu> component, there are times where the direction of the opened menu causes unwanted scrolling in the viewport. Most common use case is for OverflowMenu

I am asking as a developer.

Example

Justification

The alternative of this feature not being implemented is to use the complex code that detects where the OverflowMenu is, relative to the viewport and change the direction prop passed in.

Desired UX and success metrics

Success will be the menu not causing the parent dom element to cause janky overflows to occur.

"Must have" functionality

an 'auto' direction value that can be passed into the OverflowMenu's direction prop.
auto will tell OverflowMenu to detect which direction to open the menu in.

Specific timeline issues / requests

N/A

NB: The Carbon team will try to work with your timeline, but it's not
guaranteed. The earlier you make a request in advance of a desired delivery
date, the better!

Available extra resources

N/A

[laurenmrice]

Hello! 👋

We are going to move forward with this proposal because we think it would be a great idea to add automation to the overflow menu. We have moved it to our backlog to be worked on.

Thank you!

[tw15egan]

Just bumping this because another issue has been raised asking for this functionality: #7689

[David-Yuen]

Bump to this enhancement request. We are also waiting for this too

[steviesharp123]

Hello @laurenmrice,
What's the status on this change?

Since the current behavior of the overflow menu causes the whole page to have to be scrolled to view the menu (due to the bottom of the browser the menu can't be displayed properly). We have currently created a work around where the last 3-5 assets on our data table show the menu going upward. This behavior is really odd when there's only a few assets on the table and looks like a defect.

It would be so helpful to have this functionality added to the carbon component that @GAUNSD mentioned above, so we could remove this work around.

le

[David-Yuen]

Bump^, still waiting for this

[tw15egan]

As far as I am aware, there are no current workstreams attached to this issue. With the release of V11, we may be able to replace the internal FloatingMenu component with the Popover component, as Popover has the autoAlign functionality. Any PR's exploring this functionality would be welcome.

[sstrubberg]

ref #14139

[riddhybansal]

Hi there everyone this has been fixed by #14139
Here is the stackblitz example of the same. The overflow menu will align itself wherever it will get space without creating any extra scrollbars in datatable.