Touch dragging locks up active item without a call to onDragEnd

[n8sabes]

When touch-dragging, the item being dragged periodically locks up until another item in the list is touched. Please see attached screen recording where the red-border indicates isDragging until another item is dragged (despite multiple attempts on the frozen item).

I do not have any other input unfortunately, but seeing similar behavior to what @pimterry reports in #1662. I am using emotion (styled-components), but even simplifying the DND component to remove complexities, the hung drag-state problem persists. If I can narrow this down to a specific configuration / cause, I'll share what's learned.

Any help and/or workarounds are welcome!

react version: 16.13.1 react-beautiful-dnd version: 13.0.0

[n8sabes]

TO REPRODUCE

Upon further experimentation, this can be reproduced by touch-dragging and dropping an item to it's own position TWO times in a row. The second time, the item will freeze and onDragEnd will not be called.

This can be seen twice in the above screen recording when the item is "wiggled" in place.

[longhaha1998]

I have the same problem!!!How do you solve it？

[longhaha1998]

Hey bro！I found a solution, and it seems to work! @n8sabes

    onTouchEnd={() => {
        this.onTouchEnd(
           provided.draggableProps.onTransitionEnd
        );
    }}

    onTouchEnd(onTransitionEnd) {
        const { toggleIsDragging } = this.props;
        if (onTransitionEnd) {
            setTimeout(() => {
                onTransitionEnd({
                    propertyName: 'transform',
                });
            }, 330);
        } else {
            toggleIsDragging(false);
        }
    }

It looks ugly, but it solves my problem. Try it!

[n8sabes]

@longhaha1998 Thank you! I also saw your post on #1662 and #1976.

I'm unclear on how to integrate the onTouchEnd in a functional component using hooks without a this context. Where is toggleIsDragging coming from or is this just a custom function passed as a prop to Draggable?

[longhaha1998]

If you use the transtionEnd method, it will look something like this

(provided, snapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        onTouchEnd={() => {
                            this.onTouchEnd(
                                provided.draggableProps.onTransitionEnd
                            );
                        }} />
)

You needn't worry about toggleIsDragging, it's from my redux

[n8sabes]

@longhaha1998, okay .... that is how I implemented.

The toggleIsDragging was throwing me off. Thanks for clarifying.