A problem with the menu positioning inside scrollable containers

[dmitriy-kudelko]

Hey guys,

We're having a problem with using menu in data grids. In some cases we have to make grid scrollable horizontally when the content doesn't fix the available with (either via the scrollHorizontally prop or by manually wrapping the grid in a scrollable container - doesn't matter). We use menu to implement row actions.

And this is where the current implementation of the Menu component has a flaw. Since it's rendered in the same DOM element (within the cell), when the menu overflows the table container (either because it's the last row, or a single row and the menu is taller than the row height), the scrollbars appear, and the menu is cut.

Here's a link to Codesandbox illustrating the problem.

Usually, a way to work around such issues is to use portals to render the menu in a different DOM container than the trigger (e.g. document body). We tried it on our side by wrapping the <Menu /> in React.createPortal and it helps, well, to some extent, but obviously the positioning of the menu is not ideal, and depending on the position of the trigger on the screen does not always position the menu appropriately. So this seems to be something that should be rather fixed in Paste, cause we as consumers have no control over the positioning mechanism.

[dosubot[bot]]

🤖

Hey there, @dmitriy-kudelko! Fancy seeing you here again. Hope you've been doing well since our last cosmic rendezvous in the world of code. 🌌 I'm diving into your issue now and will orbit back shortly with some insights.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Menu items don't fit the Menu in Mobile Devices (updated: 01/31/2024, similarity score: 88%)
• menu component inside a table - Answer (updated: 01/28/2021, similarity score: 86%)
• Toast scroll issue (updated: 07/27/2022, similarity score: 85%)

[dosubot[bot]]

🤖

Thank you for bringing this issue to our attention. It seems like you're encountering a common problem when dealing with overflow and positioning in CSS. The issue arises because the menu is a child of the grid container, and when the menu tries to overflow the grid container, the browser adds scrollbars to the container.

Using React.createPortal is a good approach to solve this issue, as it allows you to render the menu in a different part of the DOM hierarchy, effectively bypassing the overflow issue. However, as you've noticed, this introduces a new problem with positioning the menu correctly.

In the current implementation of the Paste design system, the positioning of the menu is handled by the MenuPrimitive component from the "@twilio-paste/menu-primitive" package. The actual positioning logic is not provided in the context, but it's likely that it uses CSS positioning properties (like position, top, left, etc.) to position the menu relative to the trigger.

To solve the positioning issue when using React.createPortal, you might need to calculate the position of the trigger element relative to the viewport, and then apply these coordinates to the menu. This can be done using the getBoundingClientRect method of the trigger element, which returns the size of an element and its position relative to the viewport.

Here's a simplified example of how you might implement this:

const triggerRef = useRef(null);

const triggerRect = triggerRef.current.getBoundingClientRect();

const menuStyle = {
  position: 'fixed',
  top: `${triggerRect.top}px`,
  left: `${triggerRect.left}px`,
};

return (
  <>
    <button ref={triggerRef}>Open menu</button>
    {isOpen && ReactDOM.createPortal(
      <Menu style={menuStyle}>Menu content</Menu>,
      document.body
    )}
  </>
);

Please note that this is a simplified example and might not cover all edge cases. For example, you might need to update the position of the menu when the window is resized or when the user scrolls.

I hope this helps! If you have any further questions or need more clarification, please let me know.

Sources

• packages/paste-core/components/menu/src/Menu.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[dmitriy-kudelko]

Thanks Bot!
Yes, this is something that we've tried but, as mentioned, it does not handle all edge cases.

[TheSisb]

Hi @dmitriy-kudelko,

You can force the Menu dropdown to open in a portal by calling useMenuState like this:

const menu = useMenuState({modal: true});

Let me know if that solves your issue. I plan to add some documentation around this soon.

[dmitriy-kudelko]

Hi @TheSisb ,
Thanks!

I was about to say that it did the trick cause it worked in many cases, but I've just bumped into a case where it didn't, i.e. the menu didn't show up at all when providing modal: true (though I saw a portal being attached to the DOM).
I'm not sure yet what was the issue, so I'm gonna try to create a reproducible example.

[dmitriy-kudelko]

@TheSisb , I've figured out what was wrong..
We have a use case where one of menu items should be rendered conditionally based on a back end state. And we tried to encapsulate this behaviour in a component wrapping around MenuItem. This component performs an API call and then either renders active or disabled item.

A problem however is that the Menu is only rendered once and then just shown without re-rendering whenever the trigger (MenuButton) is clicked. Thus our API call was only performed during the initial render but not on subsequent menu trigger clicks. We tried to force re-render it the following way so that each time the menu is shown the API call is performed, which worked e.g. (pseudo):

const [key, setKey] = useState(0);

return (
  <>
      <MenuButton
        onClick={() => {
          if (!menu.visible) {
            setKey((currentKey) => currentKey + 1);
          }
        }}
      />

      <Menu key={key}><ConditionalMenuItem/></Menu>
  </>
)

When used with useMenuState({modal: true}); however this causes the menu not appearing at all. Or more precisely appearing with zero height, hence being invisible. But I was able to work around it by passing key to not to Menu but to React.Fragment wrapping menu items (probably re-rendering is something which could be also supported via some option as it would be useful in scenarios such as described).

So in general modal: true works.
Thanks!

[TheSisb]

Thank you for the follow-up! This is insightful and I'm sure will help others down the line!