gridstack.js: _mouseDown method causing issue with child elements receiving event

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!

About this issue

Original URL
State: closed
Created a year ago
Comments: 21 (10 by maintainers)

Commits related to this issue

GridStackOptions.draggable.cancel option * you can now specify children that will prevent item from being dragged when clicked on. * fix for #2205 * updated demo to showcase custom non draggable item — committed to adumesny/gridstack.js by adumesny a year ago

Most upvoted comments

I think there is a misunderstood. Suggested “skipMouseDownEls” option is in addition to “skipMouseDown” parameter.

You keep the following part:

// make sure we are not clicking on known object that handles mouseDown (TODO: make this extensible ?) #2054
const skipMouseDown = ['input', 'textarea', 'button', 'select', 'option'];
const name = (e.target as HTMLElement).nodeName.toLowerCase();
if (skipMouseDown.find(skip => skip === name)) return true;

You only change this part:

// also check for content editable
//if ((e.target as HTMLElement).closest('[contenteditable="true"]')) return true;
let skipMouseDownEls = this.option.skipMouseDownEls || [];
skipMouseDownEls.push('[contenteditable="true"]');
if ((e.target as HTMLElement).closest( skipMouseDownEls.join() )) return true;

In that way, you let to users the possibility to skip elements without changing the core behaviour. So, this is not a workaround in my opinion.

Hope this will help you in your analysis.

PS: I understand very well when you say “I would like the fix it the right way”

Gezdy on Feb 14, 2023