StatefulTable: OverflowMenu should scroll with its container

[ravinain]

RowAction OverflowMenu in StatefulTable is not scrolling with the container.

This issue is similar to #4755 . However, I'm using StatefulTable

When I set the parent div position to relative, it fixes the scroll issue but introduces another. After scroll, the position of overflow menu is not correct. This is exactly same problem mentioned in the aforementioned ticket.

Dependency: carbon-addons-iot-react: 2.145
Browser: Chrome

Expected Behavior:
OverflowMenu should scroll with container. Also, after scroll the overflow menu should display at correct position.

Steps to reproduce the issue

1. .parent div is scrollable
2. scroll div
3. Now click on overflow rowAction
4. Notice the position of overflow rowAction menu

Example:

<div class="parent" data-floating-menu-container="data-floating-menu-container">
        <StatefulTable></StatefulTable>
</div>

.parent {
    position: relative;
}

You can also refer the aforementioned issue #4755.

[tw15egan]

Hey there @ravinain, since this may be an issue with the StatefulTable component, would it make more sense to open an issue against the carbon-addons-iot-react repo instead? If you believe it is an issue with the core Carbon library, could you please recreate a reduced test case in CodeSandbox so we can take a look?

[ravinain]

Hi,

I have created an example here: Overflow-Menu-Issue.

Steps to reproduce:

• Click on overflow menu on any record
• Scroll now. (The menu scroll with container, this is expected)
• Click on any other record now. You will notice the menu opened but at incorrect position.

[tw15egan]

I'm unable to reproduce the issue.

Going to close this as unable to reproduce, but if you can replicate the issue (without the StatefulTable component since that is an IOT add-on) we'd be more than happy to reopen and take another look.

[petersandor]

@tw15egan this is still a problem, please see my slightly modified fork of the previously shared CodeSandbox: https://codesandbox.io/s/overflow-menu-issue-forked-y6f2d9

[tw15egan]

@petersandor If this is an issue with the StatefulTable component, that would need to be fixed in the Carbon IOT add-ons repo. Are you able to reproduce the issue with the Carbon DataTable? I am still unable to reproduce it on our end.

[petersandor]

@tw15egan it doesn't matter what component the OverflowMenu is in (it can even be a plain div), I can set up a different example.

[tw15egan]

@petersandor, if you can reproduce the issue with just the overflow menu, please create a new issue so we can properly track a fix. This one seems to be tied to an addon library.

[petersandor]

@tw15egan see screen recording from Carbon React Storybook page:

All that is needed is the overflow scroll on the parent container, height limitation and a lot of content before and after the overflow menu.

[tw15egan]

From slack:

May need to make sure the OverflowMenu has the data-floating-menu-container set to the parent selector (https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#data-floating-menu-container), but the storybook doesn’t have it set and I’m unable to see the same bug

If a simplified reproduction can be made, we can work on a fix, but I am unaware of what is causing the issue.

[petersandor]

@tw15egan here's a new CodeSandbox with everything https://codesandbox.io/s/romantic-cloud-lbdm42?file=/src/index.js

[tw15egan]

If you wrap the menu in a div and set that as the container, it should be contained inside the scrollable container.
https://codesandbox.io/s/dreamy-heisenberg-n41ncd?file=/src/index.js

[petersandor]

If you wrap the menu in a div and set that as the container, it should be contained inside the scrollable container. https://codesandbox.io/s/dreamy-heisenberg-n41ncd?file=/src/index.js

Right, so basically the overflow menu cannot have any sibling elements otherwise the positioning breaks.

[tw15egan]

It can have sibling elements; it just needs its position set to a container inside the scrolling container rather than the scrolling container itself.

[petersandor]

It can have sibling elements; it just needs its position set to a container inside the scrolling container rather than the scrolling container itself.

I see, this is an undocumented feature of the OverflowMenu though, I can see it is mentioned in the Tooltip which presumably uses the same underlying FloatingMenu component.

Thanks for help @tw15egan!

[tw15egan]

Sorry for the confusion! If we can improve the documentation regarding this functionality, I'd love to update it to reduce headaches in the future, just let me know what should be copied over from theTooltip documentation 🙂

[petersandor]

Actually if I may ask one more question, I noticed that the class is not really necesary for the data-floating-menu-container, it selects by the attribute only:

carbon/packages/react/src/components/OverflowMenu/OverflowMenu.js

Line 455 in 19778e9

(triggerEl && triggerEl.closest('[data-floating-menu-container]')) ||

Which means it selects the overflow menu button itself (I confirmed by removing the attribute's value in your CodeSandbox example).

[petersandor]

@tw15egan isn't that an accessibility violation? The entire overflow menu is inside of the trigger button in your example? Also React complains that the overflow menu item (which is a button) is inside of the trigger button:

[tw15egan]

Updated the example https://codesandbox.io/s/dreamy-heisenberg-n41ncd?file=/src/index.js so that it correctly appends to the div and not the OverflowMenu

#4755 (comment)

[petersandor]

Thanks again @tw15egan.

I still think that this is not ideal and the menu should handle this without forcing the consumers of the library to set position: relative and data-floating-menu-container attribute on the parent element as that may have other unintended side effects.

Other libraries solve this problem by dynamically recalculating the position of the menu which can also be tricky.