react-grid-layout Error: <DraggableCore> not mounted on DragStart

user_11400916 0
Viewed 1866

When attempting to drag around or resize any panel within my ResponsiveGridLayout i'm getting the following error:<DraggableCore> not mounted on DragStart!

Here is my GridLayout:

<ResponsiveGridLayout
        className="layout"
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        onLayoutChange={(layout, allLayouts) => handleLayoutChange(allLayouts)}
        rowHeight={30}
        layouts={layouts}
        measureBeforeMount={false}
        compactionType="vertical"
        useCSSTransforms={true}
    >
        <Panel key="a" title="Interactions per country">
            <PieGraph />
        </Panel>
    </ResponsiveGridLayout>

Here is each individual Panel:

export const Panel: React.FC<IPanelProps> = (props) => {
const {className, children, title, shouldScroll, ...defaultPanelProps} = props;
let scrollClass = shouldScroll ? " scroll-y" : "";

return (
    <div {...defaultPanelProps} className={`custom-panel wrapper ${className}`} >
            {title && <div className="custom-panel-title text-medium">{title}</div>}

            <div className={`custom-panel-content ${scrollClass}`} onMouseDown={ e => e.stopPropagation() }>
                {children}
            </div>
    </div>
);

};

react-grid-layout reactjs
1 Answers

I fixed this by adding a "ref" to my custom <Panel/> Component. This error only seems to happen if you have your own component (instead of a div with a key) inside your react-grid-layout.

To create the ref simply do const ref = React.createRef() and pass it to your Custom Panel component like so:

<ResponsiveGridLayout
        className="layout"
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        onLayoutChange={(layout, allLayouts) => handleLayoutChange(allLayouts)}
        rowHeight={30}
        layouts={layouts}
        measureBeforeMount={false}
        compactionType="vertical"
        useCSSTransforms={true}
    >
        <Panel ref={ref} key="a" title="Liters per active country">
            <PieGraph />
        </Panel>
    </ResponsiveGridLayout>

And your custom Panel becomes:

export const Panel = React.forwardRef((props: IPanelProps, ref) => {
const { className, children, title, shouldScroll, ...defaultPanelProps } = props as any;
let scrollClass = shouldScroll ? " scroll-y" : "";

return (
    <div ref={ref} {...defaultPanelProps} className={`custom-panel wrapper ${className}`} >

        {title && <div className="custom-panel-title text-medium">{title}</div>}

        <div className={`custom-panel-content ${scrollClass}`} onMouseDown={e => e.stopPropagation()}>
            {children}
        </div>
    </div>
);

});

Notice the React.forwardRef((props: IPanelProps, ref) and the prop for ref={ref}.

user_114009160
Related