From 4ad285b4d46432ded043a37b46f91f2495db7876 Mon Sep 17 00:00:00 2001
From: "Ghislain B." <gbeaulac@gmail.com>
Date: Mon, 20 Jan 2025 19:23:55 -0500
Subject: [PATCH] fix: opening Header Menu shouldn't add Active Header Cell
 (#1102)

---
 src/plugins/slick.draggablegrouping.ts | 10 ++++++----
 src/slick.grid.ts                      | 13 +++++++------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/plugins/slick.draggablegrouping.ts b/src/plugins/slick.draggablegrouping.ts
index 38c8e02f..456bbc2e 100644
--- a/src/plugins/slick.draggablegrouping.ts
+++ b/src/plugins/slick.draggablegrouping.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import type SortableInstance from 'sortablejs';
+import type { SortableEvent, SortableInstance, SortableOptions } from 'sortablejs';
 
 import type { Column, DOMMouseOrTouchEvent, DraggableGroupingOption, Grouping, GroupingGetterFunction } from '../models/index.js';
 import { BindingEventService as BindingEventService_, SlickEvent as SlickEvent_, SlickEventHandler as SlickEventHandler_, Utils as Utils_ } from '../slick.core.js';
@@ -177,7 +177,8 @@ export class SlickDraggableGrouping {
       //   // NOTE: need to disable for now since it also blocks the column reordering
       //   return this.columnsGroupBy.some(c => c.id === target.getAttribute('data-id'));
       // },
-      onStart: () => {
+      onStart: (e: SortableEvent) => {
+        e.item.classList.add('slick-header-column-active');
         dropzoneElm.classList.add('slick-dropzone-hover');
         dropzoneElm.classList.add('slick-dropzone-placeholder-hover');
         const draggablePlaceholderElm = dropzoneElm.querySelector<HTMLDivElement>('.slick-placeholder');
@@ -191,7 +192,8 @@ export class SlickDraggableGrouping {
           groupTogglerElm.style.display = 'none';
         }
       },
-      onEnd: (e: Event & { item: any; clone: HTMLElement; }) => {
+      onEnd: (e: SortableEvent) => {
+        e.item.classList.remove('slick-header-column-active');
         const draggablePlaceholderElm = dropzoneElm.querySelector<HTMLDivElement>('.slick-placeholder');
         dropzoneElm.classList.remove('slick-dropzone-hover');
         draggablePlaceholderElm?.classList.remove('slick-dropzone-placeholder-hover');
@@ -244,7 +246,7 @@ export class SlickDraggableGrouping {
         e.stopPropagation();
         setupColumnResize.call(grid);
       }
-    };
+    } as SortableOptions;
 
     this._sortableLeftInstance = Sortable.create(document.querySelector(`.${grid.getUID()} .slick-header-columns.slick-header-columns-left`) as HTMLDivElement, sortableOptions);
     this._sortableRightInstance = Sortable.create(document.querySelector(`.${grid.getUID()} .slick-header-columns.slick-header-columns-right`) as HTMLDivElement, sortableOptions);
diff --git a/src/slick.grid.ts b/src/slick.grid.ts
index 3ad1046e..0a517dbd 100644
--- a/src/slick.grid.ts
+++ b/src/slick.grid.ts
@@ -1,5 +1,5 @@
 // @ts-ignore
-import type SortableInstance from 'sortablejs';
+import type { SortableEvent, SortableInstance, SortableOptions } from 'sortablejs';
 
 import type {
   AutoSize,
@@ -1900,9 +1900,9 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       onMove: (event: MouseEvent & { related: HTMLElement; }) => {
         return !event.related.classList.contains(this._options.unorderableColumnCssClass as string);
       },
-      onStart: (e: { item: any; originalEvent: MouseEvent; }) => {
-        canDragScroll = !this.hasFrozenColumns() ||
-          Utils.offset(e.item)!.left > Utils.offset(this._viewportScrollContainerX)!.left;
+      onStart: (e: SortableEvent) => {
+        e.item.classList.add('slick-header-column-active');
+        canDragScroll = !this.hasFrozenColumns() || Utils.offset(e.item)!.left > Utils.offset(this._viewportScrollContainerX)!.left;
 
         if (canDragScroll && e.originalEvent.pageX > this._container.clientWidth) {
           if (!(columnScrollTimer)) {
@@ -1917,7 +1917,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
           columnScrollTimer = null;
         }
       },
-      onEnd: (e: MouseEvent & { item: any; originalEvent: MouseEvent; }) => {
+      onEnd: (e: SortableEvent) => {
+        e.item.classList.remove('slick-header-column-active');
         window.clearInterval(columnScrollTimer);
         columnScrollTimer = null;
 
@@ -1941,7 +1942,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
           this.setFocus(); // refocus on active cell
         }
       }
-    };
+    } as SortableOptions;
 
     this.sortableSideLeftInstance = Sortable.create(this._headerL, sortableOptions);
     this.sortableSideRightInstance = Sortable.create(this._headerR, sortableOptions);