search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.82k stars 1.14k forks source link

[data grid] Grid menu component customisation #12902

Closed trbagley-gresham closed 2 weeks ago

trbagley-gresham commented 3 weeks ago

The problem in depth

Is it possible to change the type of component that is rendered for menu poppers via a slot prop? The motivation is to have more control over where the menu is positioned by changing the Popover to a Popper and using the anchorPosition prop. I've tried passing a Popover to basePopper, but trying to render children is problematic as they are wrapped by a transition in GridMenu.

Perhaps the changes discussed in the PR linked below will provide more flexibility? https://github.com/mui/mui-x/issues/12568

Your environment

No response

Search keywords: menu popper slot Order ID: 45466

michelengelen commented 3 weeks ago

Hey @trbagley-gresham ... right now. you are right. Exchanging the popper component with popover (or similar) is not trivial. As you mentioned we are currently discussing our slots API so expect changes there (probably in the next major, since this will be a big breaking change)

However: You can customize the anchor element for the popper as shown here. The only thing to consider is some kind of guarding to not target each and every popper instance to the same spot.

Would that be a workaround for you?

trbagley-gresham commented 3 weeks ago

Hi @michelengelen, thanks for the suggestion. Unfortunately customising the anchor element won't address our needs as we'd like to position the popper relative to the cursor (see example). I believe this can only be done using a Popover, but please correct me if there are props we can pass to Popper to achieve this.

michelengelen commented 3 weeks ago

This is still doable. Check out this demo. Be aware that this is not production ready as the position gets updated even when the popper is open. Also you would want to only update the anchor element for specific use-cases (I guess).

Popper placement on cursor

Would that help in your case?

trbagley-gresham commented 3 weeks ago

Thanks @michelengelen, this looks like a workable solution for now. As you say, I imagine we'll need additional logic to only update anchorEl for certain poppers.

michelengelen commented 2 weeks ago

I assume this can be closed now. Feel free to reopen if you encounter problems with this.

github-actions[bot] commented 2 weeks ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@trbagley-gresham: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.