ResizeObserver loop completed with undelivered notifications. when reducing the browser width

[bbenami]

Describe the bug

I have a basic data grid that spans the full width of the window. When I reduce the width of the browser window, I encounter the following error message: "ResizeObserver loop completed with undelivered notifications." This issue doesn't occur when I increase the browser width or adjust the height.

To Reproduce

1. Reduce the width of the browser window. Link to code example:

import React from "react";
import DataGrid from "react-data-grid";
import { data } from "../datasource";

import "react-data-grid/lib/styles.css";

const About: React.FC = () => {
  const datas: object[] = data(10);

  const columns = [
    {
      key: "TaskID",
      name: "Task Id",
    },
    { key: "Engineer", name: "Engineer" },
    { key: "Designation", name: "Designation" },
  ];

  return <DataGrid columns={columns} rows={datas} />;
};

export default About;

datasource.ts

const names = [
  "TOM",
  "Hawk",
  "Jon",
  "Chandler",
  "Monica",
  "Rachel",
  "Phoebe",
  "Gunther",
  "Ross",
  "Geller",
  "Joey",
  "Bing",
  "Tribbiani",
  "Janice",
  "Bong",
  "Perk",
  "Green",
  "Ken",
  "Adams",
];
const hours = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const designation = [
  "Manager",
  "Engineer 1",
  "Engineer 2",
  "Developer",
  "Tester",
];
const status = ["Completed", "Open", "In Progress", "Review", "Testing"];
export function data(count: number) {
  const result = [];
  for (let i = 0; i < count; i++) {
    result.push({
      Designation:
        designation[Math.round(Math.random() * designation.length)] ||
        designation[0],
      Engineer: names[Math.round(Math.random() * names.length)] || names[0],
      Estimation: hours[Math.round(Math.random() * hours.length)] || hours[0],
      Status: status[Math.round(Math.random() * status.length)] || status[0],
      TaskID: i + 1,
    });
  }
  return result;
}

Expected behavior

Not to throw an exception when resizing the browser

Environment

• react-data-grid version: 7.0.0-beta.46
• react/react-dom version: 18.3.1

Additional context

[balaji-sivasakthi]

Hi @bbenami, I'm unable to reproduce the issue you're experiencing. Could you please specify which browser you're using?

[bbenami]

my-app.zip

I'm using Chrome Version 127.0.6533.120 (Official Build) (64-bit) on Windows 11. Attached is a sample project the reproduce the issue on my laptop.

[balaji-sivasakthi]

@bbenami Working fine in mac.

Chrome is up to date
Version 128.0.6613.85 (Official Build) (arm64)

but I found a thread in stack overflow https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded

[bbenami]

I upgraded to the latest Chrome Version 128.0.6613.85 (Official Build) (64-bit) and I get the same error. It happens also on Edge. However, it works fine on the same laptop with Firefox version 129.0.2 (64-bit)

[bbenami]

@balaji-sivasakthi I build the project with

 npm run build 

and used

serve -s build 

to run it statically. It works fine ! It still does not work in development mode using npm start. Which option did you test on your Mac?

[balaji-sivasakthi]

@bbenami I have tried with npm start

[amanmahajan7]

Closing as this a duplicate issue https://github.com/adazzle/react-data-grid/issues/3314