fix: opening Header Menu shouldn't add Active Header Cell (#1102)

6pac · Jan 21, 2025 · 4ad285b · 4ad285b
1 parent 878b6cd
commit 4ad285b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git 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
@@ -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);