From 645da5a5bf4ed8a195eeb8949c73e1f208c38954 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 13 Aug 2025 12:09:34 +0200
Subject: [PATCH] fix(Dashboard drag&drop): ensures dragend events trigger
 correctly in chrome

---
 public/js/components/Drop/Grid.js  | 27 +++++++++++++++------------
 public/js/composables/GridLogic.js |  3 ++-
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/public/js/components/Drop/Grid.js b/public/js/components/Drop/Grid.js
index ae1a6504c..cfe5747d4 100644
--- a/public/js/components/Drop/Grid.js
+++ b/public/js/components/Drop/Grid.js
@@ -434,11 +434,8 @@ export default {
 		},
 		dragOver(evt) {
 			if ((this.y + 1) > this.rows && (this.mode == MODE_MOVE || this.mode == MODE_RESIZE)) {
-				this.positionUpdates = this.positionUpdates?.filter(item => {
-					return item.widgetid == this.draggedItem.data.widgetid;
-				})
-				this.dragEnd();
 				this.dragCancel();
+				
 			}
 			if (!this.active)
 				return this.dragCancel();
@@ -464,7 +461,7 @@ export default {
 							this.draggedOffset[1] += y;
 							y = 0;
 						}
-						this.positionUpdates = this.dragGrid.move(this.draggedItem, x, y);
+						this.positionUpdates= this.dragGrid.move(this.draggedItem, x, y);
 						break;
 					}
 					case MODE_RESIZE: {
@@ -494,8 +491,11 @@ export default {
 		},
 		dragEnd() {
 			this.removeWidgetClones();
-			if (this.mode == MODE_IDLE)
+			this.toggleDraggedItemOverlay(false);
+			
+			if (this.mode == MODE_IDLE){
 				return;
+			}
 			// clean up unused classes
 			let draggedItemNode = document.getElementById(this.draggedItem.data.widgetid);
 			draggedItemNode.classList.remove("border-danger");
@@ -503,16 +503,19 @@ export default {
 				ele.classList.remove("denied-dragging-animation");
 			})
 			
-			
-			
-			if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
-				return this.dragCancel();
+			//if (!this.active || this.x < 0 || this.y < 0 || this.x >= this.cols)
+				//return this.dragCancel();
+
 			this.mode = MODE_IDLE;
 			let updated = [];
 			this.convertGridResultToUpdate(this.positionUpdates, updated);
 			updated = this._updateFixedPositions(updated);
 			if (updated.length)
 				this.$emit('rearrangeItems', updated.filter(v => v));
+
+			this.draggedItem = null;
+			this.draggedNode = null;
+			this.$emit('draggedItem', null);
 		},
 		_updateFixedPositions(updated) {
 			updated.forEach((item, index) => {
@@ -617,7 +620,7 @@ export default {
 		@touchmove="dragOver"
 		@touchend="dragCancel"
 		@dragover.prevent="dragOver"
-		@drop="dragEnd"
+		@drop="dragEnd($event)"
 		@mousemove="updateCursorOnMouseMove"
 		@mouseleave="mouseLeave">
 		<TransitionGroup tag="div">
@@ -631,7 +634,7 @@ export default {
 				@mouse-up="mouseUp"
 				@start-resize="startResize"
 				@dragging="dragging"
-				@end-drag="dragCancel"
+				@end-drag="dragEnd"
 				@touch-end="dragEnd();mouseUp();"
 				@touch-start="updateCursorOnMouseMove($event); mouseDown();"
 				class="position-absolute"
diff --git a/public/js/composables/GridLogic.js b/public/js/composables/GridLogic.js
index 93c662eb5..ff8ae0c39 100644
--- a/public/js/composables/GridLogic.js
+++ b/public/js/composables/GridLogic.js
@@ -116,7 +116,7 @@ class GridLogic {
 				prefer = DIR_RIGHT;
 		}
 
-		const originalFrame = [...item.frame];
+		const originalFrame = Array.isArray(item.frame) ? [...item.frame] : [item.frame];
 
 		const currItem = {...item};
 		currItem.x = x;
@@ -146,6 +146,7 @@ class GridLogic {
 				}
 			}
 			replaceUpdate[item.index] = { index: item.index, x, y };
+			
 			return replaceUpdate;
 		}