[data grid] DataGrid gives warning about apiRef.current

[entaildevops]

The problem in depth

I am using DataGridPro in Dialog. When the dialog is opened for a second time, the following warning is printed to console:

"Warning: Failed prop type: The prop apiRef.current is marked as required in ForwardRef(DataGridPro), but its value is null."

Here is a simplified demo that demonstrates the issue. I also made a code sandbox demo.

I have a parent component for controlling when the dialog is open/closed.

import { useState } from 'react'
import { TestGrid } from './TestGrid'
import { Box, Button } from '@mui/material';

export const ParentComponent = () => {
  const [dialogOpen, setDialogOpen] = useState<boolean>(false);

  return (
    <Box>
        <Button onClick={() => setDialogOpen(true)}>Open dialog</Button>
        <TestGrid onCloseDialog={()=> setDialogOpen(false)} dialogOpen={dialogOpen}/>
    </Box>
  )
}

And a child component for the actual dialog and DataGrid:

import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
import { GridColDef, useGridApiRef } from '@mui/x-data-grid-pro';
import { DataGridPro } from '@mui/x-data-grid-pro';

interface TestGridProps {
    dialogOpen: boolean;
    onCloseDialog: () => void;  
  }

export const TestGrid = (props: TestGridProps) => {
  const apiRef = useGridApiRef(); //on SECOND time the dialog is opened this is null for a brief moment and this causes a warning "Warning: Failed prop type: The prop `apiRef.current` is marked as required in `ForwardRef(DataGridPro)`, but its value is `null`."
  console.log('apiRef', apiRef)

  const columns: GridColDef[] = [
    { field: 'id', headerName: 'Id', width:10 }, 
    { field: 'name', headerName: "Name", width: 150 },        
  ];
  
  const rows = [
    {id: 1, name: "Foo"},
    {id: 2, name: "Bar"}
  ]
  const handleClose = () => {
    props.onCloseDialog();   
  }

  const handleDelete = () => {
    apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
  }

  return (
    <Dialog
        maxWidth='md'
        fullWidth                
        open={props.dialogOpen}        
        onClose={handleClose}>
        <DialogTitle>Test Grid</DialogTitle>
        <DialogContent>
        <DataGridPro 
            apiRef={apiRef}      
            columns={columns}
            rows={rows}
        />
        </DialogContent>
        <DialogActions>
            <Button onClick={handleDelete}> Delete first row</Button>
            <Button onClick={handleClose}>Close</Button>            
        </DialogActions>
    </Dialog>
  )
}

Please explain why the apiRef becomes null briefly when the dialog is reopened and causes the warning. The functionality seems fine though, but I would like to get rid of the warning (and also understand the reason for it). Thanks!

Your environment

System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (127.0.2651.86)
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.20
@mui/icons-material: ^5.15.20 => 5.15.20
@mui/material: ^5.15.20 => 5.15.20
@mui/private-theming: 5.15.20
@mui/styled-engine: 5.15.14
@mui/system: 5.15.20
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-data-grid: ^7.6.2 => 7.22.2
@mui/x-data-grid-pro: ^7.22.2 => 7.22.2
@mui/x-date-pickers: ^7.16.0 => 7.16.0
@mui/x-internals: 7.16.0
@mui/x-license: 7.21.0
@types/react: ^18.2.66 => 18.3.3
react: ^18.2.0 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
typescript: ^5.2.2 => 5.4.5

problem is reproduced on both Edge and Chrome

Search keywords: apiRef.current
Order ID: 98745

[michelengelen]

Hey @entaildevops ... could you make that codesandbox public please?
I'll be glad to help afterwards! :D

[entaildevops]

@michelengelen done =)

[entaildevops]

any update on this @michelengelen?

[michelengelen]

any update on this @michelengelen?

not yet ... sry ... i had my hands full with other stuff, but will get to test it this week.

[michelengelen]

All right ... I have looked into this and the main problem is that the children if the dialog will get unmounted and the apiRef gets "cleared" to prevent bugs due to a lingering api.

To prevent that you can use the keepMounted prop on the Dialog. Would that be a sufficient solution for you?

[entaildevops]

To prevent that you can use the keepMounted prop on the Dialog. Would that be a sufficient solution for you?

Yes, looks like this is sufficient. Thanks!

Btw, it looks like this keepMounted prop is not listed in the API docs for the Dialog. This is probably because the DialogProps extend ModalProps, and for Modal the keepMounted is listed in its API docs. Nevertheless, according to the docs there is no possibility to use the keepMounted for the dialog..

[michelengelen]

ModalProps

I agree that we could possibly do a bit better on mentioning that. We did a similar thing for the Group extension for 'Tree Data' and 'Row grouping'.

Great that this solves your use case ... i'll close the issue! 👍🏼

[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

@entaildevops 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.