Grid item gets stuck on mobile while resizing near edge [video attached]

Describe the bug

Seems to set it perementaly in resizing even when resizing ended and we're dragging near the window. Have tried with and without memo. I've tried minimal styling yet still seems to be stuck .

Relevant code

const children = useMemo(() => { return layout.map((block: Block) => ( <div key={block.i} // variants={itemVariants} // transition={{ duration: 0.4, delay: 0.15 }} style={{ fontWeight: "500",

      fontSize: `${
        colWidth < 84
          ? Math.floor(((1.25 * rowHeight) / 86) * 1000 - 3) / 1000
          : Math.floor(((1.25 * rowHeight) / 86) * 1000) / 1000
      }rem`,
      lineHeight: `${Math.floor(((rowHeight * 1.4) / 86) * 100) / 100}rem`,
      padding: `${Math.floor((rowHeight / 2.6 / 86) * 100) / 100}rem`,
    }}
    className={`w-full h-full flex justify-center items-center z-20  ${
      isEditing && selectedBlock && selectedBlock.i === block.i ? " " : ""
    }`}
 
  >
    <div className="w-full h-full">
      <Block block={block} />
    </div>
    {isEditing && (
      <BlockEditorPopover
        updateBlock={updateBlock}
        deleteBlock={deleteBlock}
        block={block}
        isOpen={selectedBlock?.i === block.i}
      />
    )}
  </div>
));

}, [ layout, isEditing, selectedBlock, setSelectedBlock, updateBlock, deleteBlock, colWidth, rowHeight, layouts, ]);

return ( // Wrap the grid with a motion.div and apply container variants <motion.div variants={containerVariants} initial="hidden" animate={isInView ? "show" : "hidden"} // Trigger animation when in view ref={containerRef} className="w-full h-full "> <ResponsiveGridLayout className={layout ${ isEditing ? " outline-slate-500 outline-dashed rounded-md" : "" }} layouts={{ lg: layouts.lg, sm: layouts.sm }} breakpoints={{ lg: 1022, sm: 0 }} cols={{ lg: 12, sm: 6 }} margin={[1, 1]} rowHeight={rowHeight} onLayoutChange={onLayoutChange} resizeHandles={["se", "ne", "nw", "sw"]} onBreakpointChange={(_, newCols) => { setNumCols(newCols); }} // onDragStart={onDragStart} compactType={"vertical"} // preventCollision={true} useCSSTransforms={true} isDraggable={isEditing} isResizable={isEditing}

    // onWidthChange={onWidthChange}
  >
    {children}
  </ResponsiveGridLayout>
</motion.div>

); };

And the block component

const Block = ({ block }: { block: Block }) => { const setSelectedBlock = useBlockStore((state) => state.setSelectedBlock); const selectedBlock = useBlockStore((state) => state.selectedBlock); const isEditing = useBlockStore((state) => state.isEditing); const blockRef = useRef(null); const isInView = useInView(blockRef, { once: true }); const handleClickOutside = (event: MouseEvent) => { // Check if the click is outside the block if (blockRef.current && !blockRef.current.contains(event.target as Node)) { setSelectedBlock(null); // Deselect the block } };

useEffect(() => { if (selectedBlock?.i === block.i) { document.addEventListener("mousedown", handleClickOutside); } return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, [selectedBlock]);

return ( <motion.div ref={blockRef} className={w-full h-full ${ selectedBlock?.i === block.i ? "outline outline-2 outline-black outline-offset-2 rounded-[1.5em]" : "" } } variants={itemVariants} initial="hidden" animate={isInView ? "show" : "hidden"} // Animate when in view onClick={() => { if (isEditing) { // logger.info( selectedBlock); // logger.info(selectedBlock?.i === block.i);

      setSelectedBlock(block);
      if (selectedBlock?.i === block.i) {
        setSelectedBlock(null);
      }
    }
  }}
  onTouchStart={() => {
    if (isEditing) {
      setSelectedBlock(block);
      // logger.info(selectedBlock?.i);
      if (selectedBlock?.i === block.i) {
        setSelectedBlock(null);
      }
    }
  }}>
  {selectedBlock?.i === block.i && (
    <div
      className={`absolute -bottom-2 -right-2  z-10 rounded-full items-center justify-center flex p-[0.27em] text-white  bg-black  `}>
      <ScalingIcon className="w-4 h-4" />
    </div>
  )}
  {block.type === "basic" && <BasicBlockComponent block={block} />}
  {block.type === "icon" && <IconBlockComponent block={block} />}
  {block.type === "bio" && <BioBlockComponent block={block} />}
  {block.type === "music" && <MusicBlockComponent block={block} />}
  {block.type === "text" && <TextBlockComponent block={block} />}
  {block.type === "exclusive" && <ExclusiveBlockComponent block={block} />}
</motion.div>

); };

Your Example Website or App

locally

Steps to Reproduce the Bug or Issue

On chrome in iOS, dragging near the edge of the screen to resize. Sometimes between components also.

Expected behavior

To cancel resizing when touch is off.

react-grid-layout library version

1.5.0

Operating System Version

iOS

Browser

Chrome

Additional context

No response

Screenshots or Videos

https://github.com/user-attachments/assets/ef702796-fe3b-48b6-8218-6375381f8647