diff --git a/demo/serialization.html b/demo/serialization.html index d420addbd..adaadace0 100644 --- a/demo/serialization.html +++ b/demo/serialization.html @@ -30,6 +30,7 @@

Serialization demo

}); grid.on('added removed change', function(e, items) { + if (!items) return; let str = ''; items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; }); console.log(e.type + ' ' + items.length + ' items:' + str ); @@ -37,7 +38,7 @@

Serialization demo

let serializedData = [ {x: 0, y: 0, w: 2, h: 2, id: '0'}, - {x: 3, y: 1, h: 2, id: '1', content: ""}, + {x: 3, y: 1, h: 2, id: '1', content: "
text area
Input Field
"}, {x: 4, y: 1, id: '2'}, {x: 2, y: 3, w: 3, id: '3'}, {x: 1, y: 3, id: '4'} diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 0fd523e86..9dbf71ef3 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -73,7 +73,8 @@ Change log ## 6.0.2-dev (TBD) -* fixed [#2055](https://github.com/gridstack/gridstack.js/issues/2055) maxRow=1 resize outside +* fixed [#2055](https://github.com/gridstack/gridstack.js/issues/2055) maxRow=1 resize outside (broke in 6.0.1) +* fixed [#2054](https://github.com/gridstack/gridstack.js/issues/2054) Can't enter text in textarea/input (broke in v6) ## 6.0.2 (2022-09-23) * fixed [#2034](https://github.com/gridstack/gridstack.js/issues/2034) `removeWidget()` breaking resize handle feedback diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts index a3d7bfc9f..b32eca066 100644 --- a/src/dd-draggable.ts +++ b/src/dd-draggable.ts @@ -125,12 +125,19 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt if (DDManager.mouseHandled) return; if (e.button !== 0) return true; // only left click + // 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; + // make sure we are clicking on a drag handle or child of it... // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins) - let className = this.option.handle.substring(1); - let el = e.target as HTMLElement; - while (el && !el.classList.contains(className)) { el = el.parentElement; } - if (!el) return; + // + // REMOVE: why would we get the event if it wasn't for us or child ? + // let className = this.option.handle.substring(1); + // let el = e.target as HTMLElement; + // while (el && !el.classList.contains(className)) { el = el.parentElement; } + // if (!el) return; this.mouseDownEvent = e; delete this.dragging; delete DDManager.dragElement; @@ -184,7 +191,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt } this.triggerEvent('dragstart', ev); } - e.preventDefault(); + e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around return true; }