measureBeforeMount breaks responsive grid layout

[sajinshrestha]

trafficstars

Describe the bug

If measureBeforeMount is set totrue, all grid items within a responsive grid (WidthProvider) will have an x value of '0', causing them to be rearranged into a single column.

Your Example Website or App

https://codesandbox.io/s/hardcore-snowflake-mx8gnp?file=/src/ShowcaseLayout.js

Steps to Reproduce the Bug or Issue

1. Go to https://codesandbox.io/s/hardcore-snowflake-mx8gnp?file=/src/ShowcaseLayout.js
2. Compare layouts when measureBeforeMount is set to true vs false

Expected behavior

WithProvider to correctly set the width of the grid container.

react-grid-layout library version

1.4.1

Operating System Version

Windows

Browser

Chrome

Additional context

No response

Screenshots or Videos

No response

[crklan]

I've experienced the same issue on my project.

[manaschubby]

Yes I am also facing the same issue

[nick-shogun]

Also facing the same issue.

[rene-stesl]

Same here

[MYKEU]

Experiencing the same as well

[jaikamat]

Also experiencing the same issue. We are unable to squelch the initial flow animation.

[pariah140]

Any movement on this? It basically breaks my app.

[abdalla-rko]

any update?

[taochu]

+1

[vinaymane01]

have anyone got the solution for the above issue pls share if any solution 1)Also got same issue after setting the "measureBeforeMount" to false it is working as expected but the data is not rendering in it.

[muhajirdev]

downgraded to 1.3 fixed the issue

[nil-s-s]

I ran into this issue, too. I am not completely sure how this can be fixed. But I think I understand what is causing this: The ResizeObserver used to track size changes of the container in the HoC WidthProvider is installed on the placeholder div when measureBeforeMount is specified. This div is however removed from DOM while the ResizeObserver is still attached, this causes a change to width = 0.

Solution would be to detach the ResizeObserver before the div is removed. And attach it later to the correct elementRef again when the ComposedComponent renders.

Hope this helps somebody who can fix it.

[itsEricWu]

any update?

[itsEricWu]

I find a workaround. I created a react hook instead using the build-width Provider and this works for me:

import { useState, useEffect } from "react";

function useWindowWidth(): number {
  const [width, setWidth] = useState<number>(Math.min(window.innerWidth, 1280));

  useEffect(() => {
    function handleResize() {
      setWidth(Math.min(window.innerWidth, 1280));
    }

    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

const Home = () => {
  const width = useWindowWidth();
  return (
  <Responsive
    breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
    className="layout"
    cols={{ lg: 4, md: 4, sm: 2, xs: 1, xxs: 1 }}
    isResizable={false}
    layouts={layouts}
    width={width}
  />
....
);

}