Search code examples
reactjsmaterial-uidatagridmui-x-data-grid

Material UI Datagrid : React does not recognize the `focusElementRef` prop on a DOM element

I am working with a Material UI React DataGrid Component using the following code

const EditApplication = React.useCallback(
  (id: GridRowId) => () => {
    console.log(id);
  },
  []
);

const columns: GridColDef[] = [
  {
    field: 'application',
    headerName: 'Application Name',
    width: 400,
    minWidth: 200,
    maxWidth: 1000,
    headerClassName: 'header weight-700',
  },
  {
    width: 400,
    minWidth: 200,
    maxWidth: 1000,
    field: 'actions',
    headerName: 'Action',
    type: 'actions',
    headerClassName: 'header weight-700',

    renderCell: (params) => {
      return (
        <p
          onClick={EditApplication(params.id)}
          className='cta weight-700 click-command'
        >
          Edit
        </p>
      );
    },
  },
];

const rows: any[] = [];

applications.map((applicationDetail: application) => {
  rows.push({
    id: applicationDetail.id,
    application: applicationDetail.applicationName,
  });
});

I am then passing this into a reusable component like this

<DatagridContainer columns={columns} rowData={rows} pageSize={10} />

And this rednders on the page like this

export function DatagridContainer({ columns, rowData, pageSize }: Props) {
  return (
    <DataGrid
      autoHeight
      initialState={{
        pagination: {
          paginationModel: { pageSize: pageSize, page: 0 },
        },
      }}
      disableColumnSelector={true}
      rows={rowData}
      columns={columns}
    />
  );
}

enter image description here

When I click the edit button this gives out the information I expect. However, I get a console error \ warning like this

Warning: React does not recognize the focusElementRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase focuselementref instead. If you accidentally passed it from a parent component, remove it from the DOM element. at p

enter image description here

When I remove the Action field and the render cell, the error goes away. My Question is, what have I done wrong or missed in order for this warning \ error to be thrown?

Solution

  • I have found the culprit to the problem

    type: 'actions',

    in

    {
 width: 400,
 minWidth: 200,
 maxWidth: 1000,
 field: 'actions',
 headerName: 'Action',
 type: 'actions',
 headerClassName: 'header weight-700',

 renderCell: (params) => {
   return (
     <p
       onClick={EditApplication(params.id)}
       className='cta weight-700 click-command'
     >
       Edit
     </p>
   );
  },
},

    Removing this has solved the issue