Uncaught TypeError: Cannot read property 'cancelDrop' of null

[alexortizrosado]

If you hit the ESC key when dragging a draggable-item, from one container to another, we see this exception:

Uncaught TypeError: Cannot read property 'cancelDrop' of null

Here's what a portion of the render method looks like for this component that's having issues with the ESC key:

return (
            <div className="form-layout__wrapper">
                <div className="form-layout__column-wrap">

                    <div className="form-layout__left-column">
                        <Container groupName="1"
                                   behaviour="copy"
                                   dropPlaceholder={{
                                        animationDuration: 150,
                                        showOnTop: true,
                                        className: 'cards-drop-preview'
                                   }}
                                   getChildPayload={i => formFields[i]}>
                            {
                                formFields.map((field, i) => {
                                    return (
                                        <Draggable key={i} className={"draggable-" + field.name}>
                                            <div className="draggable-field">
                                                <span className="form-layout__field-type-icon"><FontAwesomeIcon icon={field.icon} /></span> {field.label}
                                            </div>
                                        </Draggable>
                                    );
                                })
                            }
                        </Container>
                    </div>

...

<Container groupName="1"
    getChildPayload={i => this.state.addedFields[i]}
    dropPlaceholder={{
            animationDuration: 150,
            showOnTop: true,
            className: 'cards-drop-preview'
    }}
    onDrop={this.handleOnDrop}>

Also, here's a screenshot of the error happening when the ESC key is pressed:

[alexortizrosado]

@kutlugsahin - Just checking into to see if this is something that can be fixed with a configuration change or is this a true bug in the library. Any thoughts?

[kutlugsahin]

Hey @alexortizrosado Library does not handle ESC key automatically. I see that containers are in the modal window and when you press ESC probably modal closes and destroys the containers while dragging is in progress. If thats the problem indeed, you need to handle ESC key and before closing modal you have to finish dragging. You can cancel the drag operation by as follows.

import { smoothDnD } from 'smooth-dnd';

smoothDnD.cancelDrag();

[javad7z7]

Hey @alexortizrosado Library does not handle ESC key automatically. I see that containers are in the modal window and when you press ESC probably modal closes and destroys the containers while dragging is in progress. If thats the problem indeed, you need to handle ESC key and before closing modal you have to finish dragging. You can cancel the drag operation by as follows.

import { smoothDnD } from 'smooth-dnd';

smoothDnD.cancelDrag();

hey , when i drop on container concurrent click with mouse and app crashes and say TypeError: Cannot read property 'cancelDrop' of null how can i resolve this problem ?

[JNotelddim]

@jvdbabaei did you get this resolved on your end?

My coworkers are seeing this problem as well. I'm having a hard time reproducing with my trackpad - but they're using actual mice and clicking around trying to break it - when they try that, they're finding this crash happens.