Inverse Selection in Responsive Mode

[skh-]

Thanks for this nice library!

react-selectable-fast seems to select the inverse items when in responsive design mode in chrome. I am not sure if this is an effect of a setting or something else I'm unaware of, but it seems like strange behaviour.

https://i.gyazo.com/c78f555aa8dee2b26e0c1e2125f3fa4d

[bpmct]

@skh- were you able to fix this? I am experiencing the same thing on mobile (touch) devices occasionally?

[skh-]

sorry, no. i ended up building something custom for my specific requirements.

[shaaandi]

@bpmct Hi Ben, So are you able to resolve this with some tricks?

[bpmct]

Unfortinately, no. I ended up going with react-table-select.

On Tue, Jul 28, 2020 at 6:55 AM shaaandi [email protected] wrote:

@bpmct https://github.com/bpmct Hi Ben, So are you able to resolve this with some tricks?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/valerybugakov/react-selectable-fast/issues/68#issuecomment-665054563, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFK6WEMX5AJNJ5PVXBDBQP3R53KDPANCNFSM4KLPBWPA .

[meth0xy]

Found a Workarround: mapping TouchEvents to MouseEvents and it works.

const touchHandler = (event: TouchEvent) => {
    var touches = event.changedTouches,
        first = touches[0],
        type = '';
    switch (event.type) {
        case 'touchstart':
            type = 'mousedown';
            break;
        case 'touchmove':
            type = 'mousemove';
            break;
        case 'touchend':
            type = 'mouseup';
            break;
        default:
            return;
    }

    const simulatedEvent = document.createEvent('MouseEvent');
    simulatedEvent.initMouseEvent(
        type,
        true,
        true,
        window,
        1,
        first.screenX,
        first.screenY,
        first.clientX,
        first.clientY,
        false,
        false,
        false,
        false,
        0 /*left*/,
        null,
    );

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
};

const addTouchListener = (): void => {
    document.addEventListener('touchstart', touchHandler, true);
    document.addEventListener('touchmove', touchHandler, true);
    document.addEventListener('touchend', touchHandler, true);
    document.addEventListener('touchcancel', touchHandler, true);
};

const removeTouchListener = (): void => {
    document.removeEventListener('touchstart', touchHandler, true);
    document.removeEventListener('touchmove', touchHandler, true);
    document.removeEventListener('touchend', touchHandler, true);
    document.removeEventListener('touchcancel', touchHandler, true);
};

export {removeTouchListener, addTouchListener};

[wdjennings]

Hi all! I investigated this a bit, seems like these lines in SelectableGroup lead to pageX and pageY being undefined:

const evt: any = castTouchToMouseEvent(event)    
const { pageX, pageY } = evt

This in turn causes the handleClick(evt, pageY, pageX) event to be called with undefined values for pageX and pageY:

handleClick(evt, top, left) {
   ...
}

Since top and left are undefined, seems like ALL items get selected. Should be easy to fix with a simple check. Please do anyone feel free to make a PR for this -- although might be quicker for anyone who wants it to do it locally themselves.