Positions of every Item reseted after opening sidepanel or modal window.

[pfedarenka]

I'am using muuri for react and all is ok but when i open side panel or some modal windows my layout is breaking for every browser

i see that items lost their inline styles and class muuri-item. muuri-react-flag changed as well. maybe someone has already encountered this and will quickly answer, or I will try to reproduce it somewhere separately

"react": "^16.13.1", "styled-components": "^5.1.1",

(sorry for duplicate from https://github.com/haltu/muuri/issues/437)

[erosselli]

Hi, did you find a solution for this? I'm having a similar problem. Thanks

[MZanggl]

Was able to fix this by listening to resize changes on a wrapper div using the intersection observer (❤️ ), and then refreshing the items.

import useResizeObserver from 'use-resize-observer'; // https://github.com/ZeeCoder/use-resize-observer

// ...
const { ref: gridWrapperRef, width, height } = useResizeObserver<HTMLDivElement>();
const muuriGrid = React.useRef();

React.useLayoutEffect(() => {
  if (muuriGrid.current) {
    muuriGrid.current!.refreshItems();
    muuriGrid.current!.layout();
  }
}, [width, height]);

return (
  <div ref={gridWrapperRef}>
    <MuuriComponent ref={muuriGrid}>...</MuuriComponent>
  </div>
);

[claytron5000]

I have a similar same problem. I've tried @MZanggl 's solution above, but in TypeScript I get the following error on the MuuriComponent ref:

Type 'MutableRefObject<undefined>' is not assignable to type 'Ref<DecoratedGrid> | undefined'.
  Type 'MutableRefObject<undefined>' is not assignable to type 'RefObject<DecoratedGrid>'.
    Types of property 'current' are incompatible.
      Type 'undefined' is not assignable to type 'DecoratedGrid | null'.ts(2322)