ResponsiveReactGridLayout breakpoint resizing doesn't pop back when growing to original size

Hi. When using ResponsiveReactGridLayout it appears as if when I shrink the viewport the breakpoints are enforced and the grid layout pops down accordingly, but when I grow it back through larger breakpoints, I see the items resize but then shrink down again. This could be some misuse of the breakpoint sizes in relation to the item sizes. I’m not sure. Any guidance would be awesome.

I was using RGL 1.0.0 but I updated to 1.3.3 just now and the problem still persists.

Here’s a captured video of the problem

Here’s some bits from my code, hopefully its enough to spot if this is a bug or a user error:

const widgets = [
  {
    id: 'IncrementWidget',
    layout: { i: 'IncrementWidget', x: 0, y: 0, w: 1, h: 2, isDraggable: false },
  },
  {
    id: 'DecrementWidget',
    layout: { i: 'DecrementWidget', x: 1, y: 0, w: 1, h: 2, isDraggable: false },
  },
  {
    id: 'ImageWidget',
    layout: { i: 'ImageWidget', x: 2, y: 0, w: 1, h: 1, isDraggable: false },
  },
  {
    id: 'ImageWidget',
    layout: { i: 'ImageWidget', x: 2, y: 1, w: 1, h: 1, isDraggable: false },
  },
  {
    id: 'ImageWidget',
    layout: { i: 'ImageWidget', x: 3, y: 0, w: 1, h: 2, isDraggable: false },
  },
  {
    id: 'ImageWidget',
    layout: { i: 'ImageWidget', x: 0, y: 1, w: 4, h: 2, isDraggable: false },
  },
];

...

        <ResponsiveReactGridLayout
            autoSize
            cols={4} // 3 chunky cols
            breakpoints={{lg: 1200, md: 996, sm: 768}}
            cols={{lg: 4, md: 2, sm: 1}}
            preventCollision
            useCSSTransforms
            isDroppable
            compactType={null}
            rowHeight={150}
            onDrop={onDrop}
            onDragStop={onLayoutChange}
            onResizeStop={onLayoutChange}
        >
          {widgets.map((x, idx) => (
            <DashboardWidget key={'widget_'+idx} widget={x} data-grid={x.layout} />
          ))}
        </ResponsiveReactGridLayout>

Any tips would be great. Thanks for making this awesome project available.

[quiqueg]

FYI I’ve solved this by providing a onLayoutChange callback and passing the layouts prop:

import type { Layouts } from 'react-grid-layout'; // using @types/react-grid-layout

// ...
  const [layouts, setLayouts] = useState<Layouts>();
  const handleLayoutChange = useCallback((layout, layouts) => setLayouts(layouts));
  // ...

  return (
    <ResponsiveGridLayout
      layouts={layouts}
      onLayoutChange={handleLayoutChange}
    >
      {/* ... */}
    </ResponsiveGridLayout>
  );

This is essentially what the Responsive With Local Storage example does, but without persisting the layout data to local storage.

[sterlingwalsh]

@duhmojo Hi, working on this same issue myself. Debugging it, shows it’s definitely a bug within the library itself. The code looks like it’s attempting to cache the different layouts at the different breakpoints but then somehow it seems like it’s disposing of the cache as you switch between breaks or something like that. In fact, in onLayoutChange the value listed as “all layouts” only ever returns the current and previous. But, heres my workaround. I’m only storing the lg and medium layouts when they are updated because I have both of those set to 12 columns so in my case I dont care when the widgets are changed at smaller widths because I’m just going to re-lay them out but if you need those smaller ones you may need a little extra storage logic.

since onLayoutChanged is also called when the screen resizes and since it’s “allLayouts” prop isnt complete anyway, I’ll use the onDragStop and onResize directly.

Storing the breakpoint and using it as the key, then, forces the Grid to relay out using the provided layouts whether it really thinks it should or not ensure it goes ahead and re-lays itself out.

       	const [bp, setBp] = useState<string>('');
	const onWidgetAdjustStop: ReactGridLayout.ItemCallback = (layouts, oldItem, newItem) => {
		if (bp === 'lg' || bp === 'md') {
			onDashboardUpdate.current(dashboard.update({ layouts }));
		}
	};

then, in the component return

               <ResponsiveGridLayout
	                key={bp}
                        onBreakpointChange={setBp}
                        onDragStop={onWidgetAdjustStop}
		       onResizeStop={onWidgetAdjustStop}
	     ...