React-Grid-Layout error: Uncaught Error: not mounted on DragStart

Question

I have an error "Uncaught Error: not mounted on DragStart!" by using this library.

Well, I have a wrapper for the library's component:

const GridLayout = (props) => {
    return <ReactGridLayout {...props} />
}

export default GridLayout

Then I have React class component:

export default class Dashboard extends React.Component<DashboardProps, any> {
    constructor(props: DashboardProps) {
        super(props)

        this._dashboardScrollContainer = React.createRef()

        this._dashboardState.onShow()
    }

    componentDidMount() {
        this.syncScroll()
    }

    private readonly _dashboardScrollContainer: React.RefObject<HTMLDivElement>

    render() {
        const className = classNames(styles.Container, 'DashboardScrollContent')

        return (
            <Layout>
                {this.renderToolbar()}

                <div
                    ref={this._dashboardScrollContainer}
                    onScroll={this.onScroll}
                    className={className}
                >
                    {this.renderContent()}
                </div>
            </Layout>
        )
    }

    renderToolbar() {
        if (!ui().user.isModeller && this._mode.isFreeMode) {
            return null
        }

        return <DashboardToolbar />
    }

    renderContent() {
        if (this._api.isLoading) {
            return <LocalLoader />
        }

        if (!ui().user.isModeller && this._mode.isFreeMode) {
            return null
        }

        const { width } = this._layout.gridLayoutSetting

        return (
            <div
                className={styles.Content}
                style={{ width }}
            >
                {this.renderGridLayout()}
            </div>
        )
    }

    renderGridLayout() {
        if (_.isEmpty(this._layout.layoutMap)) {
            return null
        }

        return (
            <GridLayout
                layout={this._layout.layoutMap}
                onLayoutChange={this.onLayoutChange}
                {...this._layout.gridLayoutSetting}
            >
                {this.renderCards()}
            </GridLayout>
        )
    }

    renderCards() {
        const options = _.filter(this._api.options, (item) => {
            return !!item.type && !item.toolbarId
        })

        return _.map(options, ({ id, type }) => {
            return (
                <RootCardComponent
                    key={id}
                    cardId={id}
                    cardType={type}
                />
            )
        })
    }
}

If I try to move one of the cards, I get this error. I had an old version of this library and everything worked well. But now I have the version 1.3.4 and this error.

I also tried using new components from library, where we should import not the "ReactGridLayout", but "GridLayout" from 'react-grid-layout', but it doesn't help.

Wrapping component into React.forwardRef and then using ref attribute also doesn't help. (this way is recommended here react-grid-layout Error: <DraggableCore> not mounted on DragStart)

Maybe could someone helps with this issue?

thanks for all in advance!

React-Grid-Layout error: Uncaught Error: not mounted on DragStart

0 Answers0