OverflowMenu should scroll with its container

Summary

When the overflow menu is open and you scroll, the menu stays fixed in the page. I think it should move along with the container.

Justification

When using overflow menus in tables, this causes a non desirable behaviour.

Desired UX and success metrics

The open OverflowMenu should stick to the element that opened it even when the container scrolls up or down.

“Must have” functionality

There should be a way to specify the OverflowMenu container and it should base its positioning from there. Open OverflowMenu should scroll with its container.

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an upcoming release?

It would be good to have it on 2020 Q1, so it could be used in the next release of our product.

Available extra resources

Here a code sandbox showing the current (non-desirable) behaviour: https://codesandbox.io/s/codesandbox-z2snz Here a GIF with current (non-desirable) behaviour:

Ideas to address the issue:

• Currently the menu is being always added to the same level as ‘body’, it should be a property to specify the container where the menu is added.
• Don’t use `getBoundingClientRect as it gives positioning relative to viewport.
• Taking into account the previous two points, it should be easy to position the menu relative to its container using top/bottom left/right properties.

[EAlexRojas]

Thanks @asudoh that is working!

It’s still a bit tricky to get the correct values for top and left, but I guess that will depend on each case.

For my case in our project, I managed to get the “top” value using the offsetTop property of the container and the “left” value, I used the ones in the default function pointed out by you in a previous comment.

It would be good to add something in the documentation about the data-floating-menu-container property and the use of the menuOffsetFlip / menuOffset functions.

[JoelArmendariz]

I was able to fix this by adding data-floating-menu-container and position: relative to the container that I wanted the menu to be positioned relative to. This placed the menu back into the DOM tree where we would expect it to be. The problem here is that the menu is rendered as a float (https://reactjs.org/docs/portals.html) which causes it to be positioned relative to the body rather than the expected container that is written into. I hope this saves someone some time.