Re-rendering occurs when dragging a cell in Safari

[93jm]

material-react-table version

v2.13.0 , v3.0.1

react & react-dom versions

v18.3.1

Describe the bug and the steps to reproduce it

Hi, I’m Evan, a frontend developer.

First of all, thank you for providing such an amazing library! I’ve been enjoying using material-react-table.

However, I’ve noticed a strange issue that I’d like to report.

When using material-react-table in Safari, if the table’s layoutMode is set to 'grid' and a cell is hovered, dragging the mouse outside the table causes the browser to re-render unexpectedly.

This issue does not occur in Chrome.

I have attached a video demonstrating the issue.

I wondered if the issue might be related to my project, so I created a new React project, installed material-react-table, and tested it.

thank you

Minimal, Reproducible Example - (Optional, but Recommended)

import { useMemo } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from 'material-react-table';

//example data type
type Person = {
  name: {
    firstName: string;
    lastName: string;
  };
  address: string;
  city: string;
  state: string;
};

//nested data is ok, see accessorKeys in ColumnDef below
const data: Person[] = [
  {
    name: {
      firstName: 'John',
      lastName: 'Doe',
    },
    address: '261 Erdman Ford',
    city: 'East Daphne',
    state: 'Kentucky',
  },
  {
    name: {
      firstName: 'Jane',
      lastName: 'Doe',
    },
    address: '769 Dominic Grove',
    city: 'Columbus',
    state: 'Ohio',
  },
];

const App = () => {
  //should be memoized or stable
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'name.firstName', //access nested data with dot notation
        header: 'First Name',
        size: 150,
      },
      {
        accessorKey: 'name.lastName',
        header: 'Last Name',
        size: 150,
      },
      {
        accessorKey: 'address', //normal accessorKey
        header: 'Address',
        size: 200,
      },
      {
        accessorKey: 'city',
        header: 'City',
        size: 150,
      },
      {
        accessorKey: 'state',
        header: 'State',
        size: 150,
      },
    ],
    []
  );

  const table = useMaterialReactTable({
    columns,
    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    layoutMode: 'grid',
  });

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '0 auto',
        width: '100vw',
        height: '100vh',
      }}
    >
      <MaterialReactTable table={table} />
    </div>
  );
};

export default App;

The code above is a very simple React example.

I just used the example provided by material-react-table as is.

Screenshots or Videos (Optional)

safari.mov

chrome.mov

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.