don't clear (default) attr when dragging outside item in

* fix #2354
* external items (like toolbar) might have grid-item attr we want to clone, so don't clear them

Author: adumesny

doc/CHANGES.md

@@ -94,6 +94,7 @@ Change log
 * fix [#2349](https://github.com/gridstack/gridstack.js/issues/2349) grid NoMove vs item NoMove support
 * fix [#2352](https://github.com/gridstack/gridstack.js/issues/2352) .ui-draggable-dragging z-index for modal dialogs
 * fix [#2357](https://github.com/gridstack/gridstack.js/issues/2357) NaN inf loop when using cellHeight rem/em
+* fix [#2354](https://github.com/gridstack/gridstack.js/issues/2354) max-w cloning issue fix
 
 ## 8.2.1 (2023-05-26)
 * fix: make sure `removeNode()` uses internal _id (unique) and not node itself (since we clone those often)

src/dd-draggable.ts

@@ -285,7 +285,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     const style = this.helper.style;
     style.pointerEvents = 'none'; // needed for over items to get enter/leave
     // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)
-    style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)
     style.width = this.dragOffset.width + 'px';
     style.height = this.dragOffset.height + 'px';
     style.willChange = 'left, top';

src/gridstack.ts

@@ -1464,14 +1464,12 @@ export class GridStack {
   }
 
   /** @internal call to read any default attributes from element */
-  protected _readAttr(el: HTMLElement): GridStackWidget {
+  protected _readAttr(el: HTMLElement, clearDefaultAttr = true): GridStackWidget {
     let n: GridStackNode = {};
     n.x = Utils.toNumber(el.getAttribute('gs-x'));
     n.y = Utils.toNumber(el.getAttribute('gs-y'));
     n.w = Utils.toNumber(el.getAttribute('gs-w'));
     n.h = Utils.toNumber(el.getAttribute('gs-h'));
-    if (!(n.w > 1)) el.removeAttribute('gs-w');
-    if (!(n.h > 1)) el.removeAttribute('gs-h');
     n.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position'));
     n.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));
     n.noMove = Utils.toBool(el.getAttribute('gs-no-move'));
@@ -1480,13 +1478,19 @@ export class GridStack {
 
     // read but never written out
     n.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));
-    if (n.maxW) el.removeAttribute('gs-max-w');
     n.minW = Utils.toNumber(el.getAttribute('gs-min-w'));
-    if (n.minW) el.removeAttribute('gs-min-w');
     n.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));
-    if (n.maxH) el.removeAttribute('gs-max-h');
     n.minH = Utils.toNumber(el.getAttribute('gs-min-h'));
-    if (n.minH) el.removeAttribute('gs-min-h');
+
+    // v8.x optimization to reduce un-needed attr that don't render or are default CSS
+    if (clearDefaultAttr) {
+      if (n.w === 1) el.removeAttribute('gs-w');
+      if (n.h === 1) el.removeAttribute('gs-h');
+      if (n.maxW) el.removeAttribute('gs-max-w');
+      if (n.minW) el.removeAttribute('gs-min-w');
+      if (n.maxH) el.removeAttribute('gs-max-h');
+      if (n.minH) el.removeAttribute('gs-min-h');
+    }
 
     // remove any key not found (null or false which is default)
     for (const key in n) {
@@ -1884,8 +1888,8 @@ export class GridStack {
         cellHeight = this.getCellHeight(true);
 
         // load any element attributes if we don't have a node
-        if (!node) {// @ts-ignore private read only on ourself
-          node = this._readAttr(el);
+        if (!node) {
+          node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354
         }
         if (!node.grid) {
           node._isExternal = true;

src/utils.ts

@@ -55,8 +55,8 @@ export class Utils {
 
   /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
   static getElements(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement[] {
-    const doc = ('getElementById' in root) ? root as Document : undefined;
     if (typeof els === 'string') {
+      const doc = ('getElementById' in root) ? root as Document : undefined;
 
       // Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors
       // so if we start with a number, assume it's an id and just return that one item...
@@ -78,8 +78,8 @@ export class Utils {
 
   /** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */
   static getElement(els: GridStackElement, root: HTMLElement | Document = document): HTMLElement {
-    const doc = ('getElementById' in root) ? root as Document : undefined;
     if (typeof els === 'string') {
+      const doc = ('getElementById' in root) ? root as Document : undefined;
       if (!els.length) return null;
       if (doc && els[0] === '#') {
         return doc.getElementById(els.substring(1));