Merge pull request #2063 from adumesny/v6

Can't enter text in textarea

Author: adumesny

demo/serialization.html

@@ -30,14 +30,15 @@ <h1>Serialization demo</h1>
     });
 
     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 );
     });
 
     let serializedData = [
       {x: 0, y: 0, w: 2, h: 2, id: '0'},
-      {x: 3, y: 1, h: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button>"},
+      {x: 3, y: 1, h: 2, id: '1', content: "<button onclick=\"alert('clicked!')\">Press me</button><div>text area</div><div><textarea></textarea></div><div>Input Field</div><input type='text'>"},
       {x: 4, y: 1, id: '2'},
       {x: 2, y: 3, w: 3, id: '3'},
       {x: 1, y: 3, id: '4'}

doc/CHANGES.md

@@ -73,7 +73,8 @@ Change log
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## 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

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;
   }