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/
4.51k stars 1.31k forks source link

[data grid] When select filter or manage column from the column menu the popover should open under their respective button #13975

Open mahammahmood opened 3 months ago

mahammahmood commented 3 months ago

The problem in depth

There is an issue when I press the filter button and then select 'Manage Columns' from the column menu. The column panel opens under the filter button, and vice versa.

Here is the attached video and demo example of my code.

https://github.com/user-attachments/assets/3ddcb81f-7352-410c-9807-c2aeda549ba9

https://stackblitz.com/edit/react-bocjnd?file=Demo.tsx

Your environment

`npx @mui/envinfo` ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: Data ,Grid , Premium, GridToolbarFilterButton, GridToolbarColumnsButton, version 7 Order ID: 91010

michelengelen commented 3 months ago

Hey @mahammahmood this is the expected behavior. If you need to show the panels in a different position you can follow this demo to change the panel positions: custom filter panel position

The principle is the same for all buttons in the toolbar

mahammahmood commented 3 months ago

I want that when I select ‘Filter’ from the column menu, the filter panel should open directly below it. Similarly, when I select ‘Manage Column’ from the column menu, the panel should always open directly below the column button in all cases.