'isDragging' is incorrectly read as true when querying via 'getState()'

[ilyashubin]

'isDragging' is incorrectly read as true when querying via 'getState()'

[mlshv]

I have the same problem! This issue definitely needs a fix

Upd
Just looked into the code and it seems like I have a problem of another kind but it looks similar. I'm trying to use drag-and-drop handler together with scrollbooster. I have shouldScroll function defined like this:

new ScrollBooster({
    viewport: containerRef.current,
    content: contentRef.current,
    scrollMode: 'native',
    direction: 'horizontal',
    textSelection: true,
    shouldScroll: (state, event) => {
        const isDragHandleToched = event.path.some(checkIsDragHandle)

        return !isDragHandleToched
    },
})

But it disables click handlers on a draggable element after a first scroll move with scrollbooster. And state.isDragging is always true on single click because of this line in scrollboster:

this.events.pointerdown = (event) => {
     // ....
     this.isDragging = true
}

I'm going to investigate further

Upd2
I think I've found the problem:

this.events.click = (event) => {
    const state = this.getState()
    const dragOffsetX = this.props.direction !== 'vertical' ? state.dragOffset.x : 0
    const dragOffsetY = this.props.direction !== 'horizontal' ? state.dragOffset.y : 0
    if (Math.max(Math.abs(dragOffsetX), Math.abs(dragOffsetY)) > CLICK_EVENT_THRESHOLD_PX) {
        // this is always true if you have scrolled to any amount of pixels more than 5
        // ...even if this.isDragging equals false
        event.preventDefault()
        event.stopPropagation()
    }
    this.props.onClick(state, event, isTouch)
}

My solution is to add this.isDragging to the if statement:

    if (this.isDragging && Math.max(Math.abs(dragOffsetX), Math.abs(dragOffsetY)) > CLICK_EVENT_THRESHOLD_PX) {
        event.preventDefault()
        event.stopPropagation()
    }

I didn't dig in enough to say it should be patched on the main branch or if it going to work in your case, but it worked for me

[asmedberg]

Upd2 I think I've found the problem:

this.events.click = (event) => {
    const state = this.getState()
    const dragOffsetX = this.props.direction !== 'vertical' ? state.dragOffset.x : 0
    const dragOffsetY = this.props.direction !== 'horizontal' ? state.dragOffset.y : 0
    if (Math.max(Math.abs(dragOffsetX), Math.abs(dragOffsetY)) > CLICK_EVENT_THRESHOLD_PX) {
        // this is always true if you have scrolled to any amount of pixels more than 5
        // ...even if this.isDragging equals false
        event.preventDefault()
        event.stopPropagation()
    }
    this.props.onClick(state, event, isTouch)
}

My solution is to add this.isDragging to the if statement:

    if (this.isDragging && Math.max(Math.abs(dragOffsetX), Math.abs(dragOffsetY)) > CLICK_EVENT_THRESHOLD_PX) {
        event.preventDefault()
        event.stopPropagation()
    }

I didn't dig in enough to say it should be patched on the main branch or if it going to work in your case, but it worked for me

Not sure this project is getting updated but this solution worked for my project as well.