_mouseDown method causing issue with child elements receiving event

[artknight]

Subject of the issue

An SPAN inside the .grid-stack-item element had a mouseDown event attached, however that was intercepted by the _mouseDown method.

Solution

I ended up adding span to the skipMouseDown array.

const skipMouseDown = ['input', 'textarea', 'button', 'select', 'option', 'span'];

Hope this helps!

[adumesny]

this isn't the right fix. we need to detect that an element (div, span, etc..) has mouse handling and let it handle instead... Not sure how to do that yet...
the above items clearly use mouse events, so no brainer. the others ?

[artknight]

@adumesny so it seems gridstack uses div elements for draggable fields. I would say if there were a way to extend that list from options that are passed in at initialization that would be a great help! I saw you left a comment in there with similar thoughts.. I think until there is a better solution ( that I cannot think of atm ) this would be the next best thing. imho

[adumesny]

maybe the child handling the event need to prevent it from propagating up (to the grid item), or marked it was handled so it can skip it there... that list extensible seem like a bandaid and wouldn't work in general (you have span, but no reason the grid itself isn't a span or any dom element.

[artknight]

@adumesny the problem is that for some reason gridstack gets the mousedown event before the child element. In my particular case I am using tomselect.js ( https://tom-select.js.org/ ) inside the gridstack field. However, when clicking on the dropdown option the click gets picked up by gridstack before it gets to tomselect, and thus the event is stopped from propagating.

[adumesny]

can you post a reproduceable example please ? can't fix it without one. ideally it would be plain html/js and not use any library I don't want to have to debug...

[artknight]

@adumesny here is the screenshot that shows that gridstack gets the event first and triggers a .blur() on the activeElement, which affects tomselect.

[adumesny]

I'm adding the event as bubble (not capture, unlike the move) so GS should get the event only if the child didn't consume it , not first crack at it.

https://github.com/gridstack/gridstack.js/blob/master/src/dd-draggable.ts#L88
https://github.com/gridstack/gridstack.js/blob/master/src/dd-draggable.ts#L152

this.dragEl.addEventListener('mousedown', this._mouseDown);
....
protected _mouseDown(e: MouseEvent): boolean {
...
    // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
    document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble
    document.addEventListener('mouseup', this._mouseUp, true);
}

so don't think we get that event first... that lib need to consume that event instead. Again I need a reproduceable code showing the issue on our side.

[artknight]

@adumesny well, I understand your explanation! However, the screenshot above clearly shows the event getting picked up by GS first, and only then by tomselect. I am guessing that b/c the dropdown options are only getting added to the DOM on click they get handled in a different order.

I see a comment by you for the skipMouseDown param .....

// make sure we are not clicking on known object that handles mouseDown (TODO: make this extensible ?) #2054

Perhaps it is time to make the skipMouseDown param extensible? At least it would give me a way to updated it instead of making changes to the core js.