[data grid] setting apiRef.current.rootElementRef

[wildcat-cs]

The problem in depth

I am trying to display the datagrid component to an external popup window. I have it displaying fine, but ran into an issue with ending editing. Clicking outside of the cell does nothing however clicking in the originating window commits the change.

I've think this issue can be traced to useGridFocus which registers mouseup on apiRef.current.rootElementRef.current which is always null causing it to register with document instead of the ownerDocument where the grid is actually rendered. I'm seeing the rootElement is null regardless of what window (popup or not) the grid is rendered into when useGridFocus registers it's listeners.

I'm sure what I'm trying to accomplish is unusual but a very much requested feature for our product. Is there any way to set the rootElement outside of the grid that will allow the grid to function correctly such that it will not fall back to the current window.

I did see #8785 which for unit tests suggested adding <React.StrictMode> which did not cause the ref to be set.

Your environment

No response

Search keywords: DataGrid rootElement
Order ID: 85440

[michelengelen]

Hey @wildcat-cs and thanks for opening an issue here.
Is it possible to prepare a reproduction for us? A repository with a minimal setup that showsd that behavior would be fine.

In the meantime I will have a look what we do with the rootElementRef on our side.

[wildcat-cs]

Here is a codesandbox that shows the issue and what we are trying to do (in a very ugly way). Please excuse the copying of styles between windows :). the data grid code I am using is from one of the edit demos.

https://codesandbox.io/p/sandbox/sharp-kepler-8l3fzr

You might need to have popup blockers off to test it, but if you click open data gid the grid will open in a popup window if you try to edit a column like Age the only way to commit the change is to press enter or go back to the main page and click the body.

[michelengelen]

That's a very interesting use case you have there.... @arminmeh would you be able to have a look at this?

[wildcat-cs]

Most definitely, our application basically has several large spreadsheets displayed in the grid and users need to see it at the same time as other grids and/or views at the same time. So, they need to open the grid in the popup and maximize it on another monitor while viewing other content in the browser with live updating data between the two. They actually have the option to open in popup or not based on their monitor setup.

[arminmeh]

I've think this issue can be traced to useGridFocus which registers mouseup on apiRef.current.rootElementRef.current which is always null causing it to register with document instead of the ownerDocument where the grid is actually rendered

Thanks for the hint @wildcat-cs

Indeed, the problem is with the reference that is not being picked up once it is updated.
I have already made a fix and will open a PR

[github-actions]

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.

Note

We value your feedback @wildcat-cs! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!