"cannot drop if not dragging" (+ page stuck) when DnD quickly

[nlevari]

Bug or feature request?

Bug

Expected behaviour

Drag and Drop will work (or even cancel) for quick drag and drop

Actual behaviour

Dragged element is floating over the entire page (position: fixed) and prevent all click events in page.
This error is written in the console:
"cannot drop if not dragging"

Steps to reproduce

Drag and drop quickly several time, you won't need more then 10 seconds.

Browser version

Google chrome 61.0.3163.91 (Official Build) (64-bit)

Demo

Code:

const reorder = (list, startIndex, endIndex) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
};

const grid = 8;

const getListStyle = (isDraggingOver) => ({
    background: isDraggingOver ? '#efefef' : ''
});

const getItemStyle = (draggableStyle, isDragging) => ({
    // some basic styles to make the items look a bit nicer
    // userSelect: isDragging ? 'none' : '',
    padding: grid * 2,
    margin: `0 0 ${grid}px 0`,
    cursor: 'move',

    // change background colour if dragging
    background: isDragging ? '' : '',

    // styles we need to apply on draggables
    ...draggableStyle
});

@observer
export default class CreateMapping extends React.Component {

<-- SOME COMPONENT FUNCTIONS -->
onDragEnd = (result) => {
        // dropped outside the list
        if (!result.destination) {
            return;
        }

        const items = reorder(
            TaskStore.taskData.input.mapping.rules,
            result.source.index,
            result.destination.index
        );
        TaskStore.taskData.input.mapping.rules = items;
    };

    render() {
        let rules = TaskStore.taskData.input.mapping ? TaskStore.taskData.input.mapping.rules : [];
        return (
            <div className="create-mapping">
                <MappingHeaders/>
                <DragDropContext onDragEnd={this.onDragEnd}>
                    <Droppable droppableId="droppable">
                        {(provided, snapshot) => (
                            <div ref={provided.innerRef} style={getListStyle(snapshot.isDraggingOver)}>
                                {rules.map((rule, i) => {
                                    return <Draggable key={i} draggableId={i}>
                                        {(provided, snapshot) => (
                                            <div>
                                                <div ref={provided.innerRef} style={getItemStyle(provided.draggableStyle, snapshot.isDragging)} {...provided.dragHandleProps}>
                                                    <div>
                                                    <MappingRow counter={this.counter} index={i} remove={this.removeDataset} setInitCounter={this.setInitCounter}/>
                                                    </div>
                                                </div>
                                            </div>
                                        )}
                                    </Draggable>
                                })}
                            </div>
                        )}
                    </Droppable>
                </DragDropContext>
                <div className="btn btn-primary" title="Add another mapping to view" onClick={this.addRule}>+</div>
            </div>

        )
    }

[alexreardon]

Thanks for the bug report. To get a better feel for it can you please create an example on webpack bin. Here is a base to start from: https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw

[alexreardon]

At this stage I am unable to reproduce the issue

[alexreardon]

In addition to a working example it would be great also to get the steps you use to reproduce the issue - i am following the ones you provided and I cannot reproduce

[nlevari]

Hi,
Fortunately it is reproduced in your base webpack bin too.
To reproduce the issue, just click a lot while hovering over one item form left to right to left to right...
Video:
https://drive.google.com/file/d/0B8kvApNkGEh5Y0s0eVJpLXAzYVk/view?usp=drivesdk

Thanks

[alexreardon]

I suspect this is a timing issue. The drag is being cancelled from within the DROP_COMPLETE (which I did not think could happen!) I want to look into it but i am not around. @jaredcrowe can you take a look?

[alexreardon]

I suspect this will be a small adjustment

[alexreardon]

Thanks @nlevari for submitting this - we should be able to resolve it soon