Color picker doesn't work well with mobile touch events

[akshaybosamiya]

Try https://gradient-package-demo.web.app/ in mobile browser.

[pvrzl]

try this as temporary solution

const touchHandler = (event) => {
        const touch = event.changedTouches[0];
        const simulatedEvent = new MouseEvent(
            event.type === "touchstart" ? "mousedown" : event.type === "touchmove" ? "mousemove" : "mouseup",
            {
                bubbles: true,
                cancelable: true,
                view: window,
                detail: 1,
                screenX: touch.screenX,
                screenY: touch.screenY,
                clientX: touch.clientX,
                clientY: touch.clientY,
                ctrlKey: false,
                altKey: false,
                shiftKey: false,
                metaKey: false,
                button: 0,
                relatedTarget: null,
            }
        );
        touch.target.dispatchEvent(simulatedEvent);
    };

    useEffect(() => {
        if (isMobileDevice()) {
            document.addEventListener("touchstart", touchHandler, true);
            document.addEventListener("touchmove", touchHandler, true);
            document.addEventListener("touchend", touchHandler, true);
            document.addEventListener("touchcancel", touchHandler, true);

            return () => {
                document.removeEventListener("touchstart", touchHandler, true);
                document.removeEventListener("touchmove", touchHandler, true);
                document.removeEventListener("touchend", touchHandler, true);
                document.removeEventListener("touchcancel", touchHandler, true);
            };
        }
    }, []);

[akshaybosamiya]

try this as temporary solution

const touchHandler = (event) => {
        const touch = event.changedTouches[0];
        const simulatedEvent = new MouseEvent(
            event.type === "touchstart" ? "mousedown" : event.type === "touchmove" ? "mousemove" : "mouseup",
            {
                bubbles: true,
                cancelable: true,
                view: window,
                detail: 1,
                screenX: touch.screenX,
                screenY: touch.screenY,
                clientX: touch.clientX,
                clientY: touch.clientY,
                ctrlKey: false,
                altKey: false,
                shiftKey: false,
                metaKey: false,
                button: 0,
                relatedTarget: null,
            }
        );
        touch.target.dispatchEvent(simulatedEvent);
    };

    useEffect(() => {
        if (isMobileDevice()) {
            document.addEventListener("touchstart", touchHandler, true);
            document.addEventListener("touchmove", touchHandler, true);
            document.addEventListener("touchend", touchHandler, true);
            document.addEventListener("touchcancel", touchHandler, true);

            return () => {
                document.removeEventListener("touchstart", touchHandler, true);
                document.removeEventListener("touchmove", touchHandler, true);
                document.removeEventListener("touchend", touchHandler, true);
                document.removeEventListener("touchcancel", touchHandler, true);
            };
        }
    }, []);

It worked. Thanks.

[hxf31891]

@akshaybosamiya @pvrzl This came up in an earlier issue as well and I am in the process of updating this package to work better on mobile. Will update ASAP.