[DataGrid] Panel filter doesn't update its position if the anchorEl changes but already opened

[woodreamz]

Order ID

69763

The problem in depth 🔍

Hello,

We would like to control the position of the panel (for filter and columns panel). Most of our users are complaining about the position not being anchored to the button itself in the Toolbar. By the way, it is the case for the export and the density which creates an inconsistency for our users. We would like to have the filter and column panel behaving like density and export button (anchored to the button).

I saw different issues about the panel's position. All the proposed workarounds are using the anchorEl and set the anchor on the proper button when the user clicks:

• [data grid]: Customizing the filter menu position places other menus under the filter button #6734
• [data-grid] Changing the popper position for GridColumnsPanel #9066
• ...

Those workarounds are working fine when the user clicks on the button but if the user uses the column menu, it does not work (same thing if we use the api to open the panel).

I am not able to find a valid solution. Could you help us finding a solution allowing us to anchor the panel to the button no matter from where the panel is opened? Otherwise could we have a property on the panel to control this behavior or something else?

Thanks!

Your environment 🌎

`npx @mui/envinfo`

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

[cherniavskii]

Hi @woodreamz
Can you take a look at #10396 (comment)?
Is this what you are looking for?

[woodreamz]

@cherniavskii Yes, it seems to be what I need, I will try it as soon as I can and let you know here! Thanks!

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[woodreamz]

@cherniavskii It almost works :) If you open the Filter and then click on Custom Button, it does not work.

If you change the toggleColumnsPanel function to:

  const toggleColumnsPanel = () => {
      apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
  };

It opens the column panel at the same place as the filter panel.

This Codesandbox is exactly what I am trying to do. I will also need to change the panel's anchorOrigin when opening the column panel.

[romgrk]

What is not working for you? Can you provide a codesandbox example of the issue you're having?

[woodreamz]

What is not working for you? Can you provide a codesandbox example of the issue you're having?

My previous comment provides a gif and a codesandbox. The problem is if the panel is opened on filters and you click on columns (without closing the panel), it does not work, it reuses the same anchorEl.

[woodreamz]

Do you have any update on this issue? An ETA?
Thanks!

[romgrk]

No ETA, we're preparing v7 and have a lot of high-priority issues, so we're very busy for the next months. But it's in our list so we'll evalutate & prioritize in the next weeks.

[woodreamz]

Humm.. I have to say it's the first bug we open with our premium plan and we are a little bit disappointed by the delay, this bug was opened over a month ago and it still requires to be evaluated and prioritized... I understand you are preparing v7 but users still need support on v6.

If you can provide a workaround for this issue, I can use it and wait for v7.

[romgrk]

@mui/xgrid Does someone have an idea how to work around this?

Fundamentally I'm not sure why we have some much logic to reuse the same panel container, which is the root of the issue. I've tried to debug this but the panel only gets its position from anchorEl when the open/close prop changes, not when anchorEl changes.

[DanailH]

Ok, I've spent some time debugging the issue. looking at this example https://codesandbox.io/s/panel-anchor-forked-k52pdr?file=/Demo.tsx if you open the GridPanel by clicking either button, then close it by Esc or clicking away and then open it again by clicking the other button then it works.
@woodreamz I would suggest that you implement a custom button to first close all open panels using the apiRef and then open it again. In that scenario it should work as expected - it's a workaround. Let us know if this works. If not we would try and prioritize the issue and look at how the anchorEl is set internally. I checked it quickly and at first glance, it looks like the GridPanel was set's it to be the column header. https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx#L101

I apologize for not picking up your problem sooner but as @romgrk explained we had more pressing things to work on and the issue you have raised is not a critical problem that we had to fix quickly. We always respond in time to provide clarity on when the issue will potentially be fixed. In that particular case, we failed to set the expectations which is on us.

[michelengelen]

Ok, I've spent some time debugging the issue. looking at this example https://codesandbox.io/s/panel-anchor-forked-k52pdr?file=/Demo.tsx if you open the GridPanel by clicking either button, then close it by Esc or clicking away and then open it again by clicking the other button then it works.

@woodreamz I would suggest that you implement a custom button to first close all open panels using the apiRef and then open it again. In that scenario it should work as expected - it's a workaround. Let us know if this works. If not we would try and prioritize the issue and look at how the anchorEl is set internally. I checked it quickly and at first glance, it looks like the GridPanel was set's it to be the column header. https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx#L101

I apologize for not picking up your problem sooner but as @romgrk explained we had more pressing things to work on and the issue you have raised is not a critical problem that we had to fix quickly. We always respond in time to provide clarity on when the issue will potentially be fixed. In that particular case, we failed to set the expectations which is on us.

Would this be something to write up in an advanced recipe maybe?

[woodreamz]

Ok, I've spent some time debugging the issue. looking at this example https://codesandbox.io/s/panel-anchor-forked-k52pdr?file=/Demo.tsx if you open the GridPanel by clicking either button, then close it by Esc or clicking away and then open it again by clicking the other button then it works. @woodreamz I would suggest that you implement a custom button to first close all open panels using the apiRef and then open it again. In that scenario it should work as expected - it's a workaround. Let us know if this works. If not we would try and prioritize the issue and look at how the anchorEl is set internally. I checked it quickly and at first glance, it looks like the GridPanel was set's it to be the column header. https://github.com/mui/mui-x/blob/next/packages/grid/x-data-grid/src/components/panel/GridPanel.tsx#L101

I apologize for not picking up your problem sooner but as @romgrk explained we had more pressing things to work on and the issue you have raised is not a critical problem that we had to fix quickly. We always respond in time to provide clarity on when the issue will potentially be fixed. In that particular case, we failed to set the expectations which is on us.

I completely understand this issue is not a high priority :) I am totally fine with a workaround, I don't have the time to try it right but I will certainly try it next week! I let you know