[trackMouse], End event is not fired when moving out of <Swipeable> area

Steps to reproduce:

1. Start swipeing on some element
2. Move your finger so it’s outside of <Swipeable> area (but still pressed)
3. Release finger

Expected:

• onSwiped or onSwiped[Direction] was fired: a) just when finger moved out of element area b) when finger was released outside of element area (preffered is b) )

Actual:

• onSwiped or onSwiped[Direction] is not fired.

Note: It happens when trackMouse is enabled.

Any ideas?

[hartzis]

@TanaseHagi interesting solution with the extends Swipeable. I think i’d like to see this functionality added in the next major version, turned on when trackMouse is used 👍

[TanaseHagi]

I had the same issue with trackMouse prop set to true. My solution was to bind mousemove and mouseup events on the document object.

The reason for this is that onTouchMove and onTouchEnd also fire for touches outside of the nodeName element they were bound to, while onMouseMove and onMouseUp do not do not fire when the user moves outside the nodeName element or releases the mouse outside of it.

This is my typescript code to get around the problem.

class CustomSwipeable extends Swipeable {
    public eventStart: (e: any) => void;
    public eventMove: (e: any) => void;
    public eventEnd: (e: any) => void;
    constructor(props: any) {
        super(props);
    }
    public start = (e: React.MouseEvent) => {
        this.eventStart(e);
        document.addEventListener("mousemove", this.move);
        document.addEventListener("mouseup", this.end);
    }
    public move = (e: MouseEvent) => {
        this.eventMove(e);
    }
    public end = (e: MouseEvent) => {
        this.eventEnd(e);
        document.removeEventListener("mousemove", this.move);
        document.removeEventListener("mouseup", this.end);
    }
    public render() {
        const newProps = ({
            ...this.props,
            onTouchStart: this.eventStart,
            onTouchMove: this.eventMove,
            onTouchEnd: this.eventEnd,
            onMouseDown: this.props.trackMouse && this.start,
            // onMouseDown: this.props.trackMouse && this.eventStart,
            // onMouseMove: this.props.trackMouse && this.eventMove,
            // onMouseUp: this.props.trackMouse && this.eventEnd,
        } as any);

        delete newProps.onSwiped;
        delete newProps.onSwiping;
        delete newProps.onSwipingUp;
        delete newProps.onSwipingRight;
        delete newProps.onSwipingDown;
        delete newProps.onSwipingLeft;
        delete newProps.onSwipedUp;
        delete newProps.onSwipedRight;
        delete newProps.onSwipedDown;
        delete newProps.onSwipedLeft;
        delete newProps.flickThreshold;
        delete newProps.delta;
        delete newProps.preventDefaultTouchmoveEvent;
        delete newProps.stopPropagation;
        delete newProps.nodeName;
        delete newProps.children;
        delete newProps.trackMouse;

        return React.createElement(
            this.props.nodeName,
            newProps,
            this.props.children
        );
    }
};