Merge pull request #2065 from adumesny/master

v6.0.3 branch fixes

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

@@ -6,6 +6,7 @@ Change log
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
 - [7-dev (TBD)](#7-dev-tbd)
+- [6.0.3-dev (2022-10-08)](#603-2022-10-08)
 - [6.0.2 (2022-09-23)](#602-2022-09-23)
 - [6.0.1 (2022-08-27)](#601-2022-08-27)
 - [6.0.0 (2022-08-21)](#600-2022-08-21)
@@ -79,6 +80,10 @@ Thank you [StephanP] for sponsoring it.<br>
 See [advance Nested](https://github.com/gridstack/gridstack.js/blob/master/demo/nested_advanced.html)
 * add - ability to pause drag&drop collision until the user stops moving - see `DDDragOpt.pause` (used for creating nested grids on the fly based on gesture).
 
+## 6.0.3-dev (2022-10-08)
+* 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
 * fixed [#2043](https://github.com/gridstack/gridstack.js/issues/2043) when swapping shapes in maxRow grid, make sure we still check for 50% coverage

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "6.0.2-dev",
+  "version": "6.0.3-dev",
   "description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",

src/dd-base-impl.ts

@@ -1,5 +1,5 @@
 /**
- * dd-base-impl.ts 6.0.2-dev
+ * dd-base-impl.ts 6.0.3-dev
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 

src/dd-draggable.ts

@@ -1,5 +1,5 @@
 /**
- * dd-draggable.ts 6.0.2-dev
+ * dd-draggable.ts 6.0.3-dev
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 
@@ -129,12 +129,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;
@@ -201,7 +208,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;
   }
 

src/dd-droppable.ts

@@ -1,5 +1,5 @@
 /**
- * dd-droppable.ts 6.0.2-dev
+ * dd-droppable.ts 6.0.3-dev
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 

src/dd-element.ts

@@ -1,5 +1,5 @@
 /**
- * dd-elements.ts 6.0.2-dev
+ * dd-elements.ts 6.0.3-dev
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 

src/dd-gridstack.ts

@@ -1,6 +1,6 @@
 /**
- * dd-gridstack.ts 6.0.2-dev
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-gridstack.ts 6.0.3-dev
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
 /* eslint-disable @typescript-eslint/no-unused-vars */

src/dd-manager.ts

@@ -1,6 +1,6 @@
 /**
- * dd-manager.ts 6.0.2-dev
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
+ * dd-manager.ts 6.0.3-dev
+ * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
 import { DDDraggable } from './dd-draggable';

src/dd-resizable-handle.ts

@@ -1,5 +1,5 @@
 /**
- * dd-resizable-handle.ts 6.0.2-dev
+ * dd-resizable-handle.ts 6.0.3-dev
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */