From d5b69fe4aca85a4416c2b556f608fb59978316a6 Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Sun, 30 Apr 2023 00:18:37 -0400
Subject: [PATCH] chore: fix some UI bugs found with draggable grouping

---
 .../__tests__/slickDraggableGrouping.spec.ts     | 16 ++++++----------
 .../src/extensions/slickDraggableGrouping.ts     | 12 +++++-------
 packages/common/src/styles/slick-plugins.scss    |  1 +
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
index 1af545889..fda86e8e2 100644
--- a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
+++ b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
@@ -121,7 +121,6 @@ describe('Draggable Grouping Plugin', () => {
   let translateService: TranslateServiceStub;
   let headerDiv: HTMLDivElement;
   let preHeaderDiv: HTMLDivElement;
-  let dropzonePlaceholderElm: HTMLDivElement;
   let dropzoneElm: HTMLDivElement;
 
   beforeEach(() => {
@@ -130,12 +129,9 @@ describe('Draggable Grouping Plugin', () => {
     headerDiv = document.createElement('div');
     dropzoneElm = document.createElement('div');
     dropzoneElm.className = 'slick-dropzone';
-    dropzonePlaceholderElm = document.createElement('div');
-    dropzonePlaceholderElm.className = 'slick-placeholder';
     headerDiv.className = 'slick-header-column';
     preHeaderDiv = document.createElement('div');
     preHeaderDiv.className = 'slick-preheader-panel';
-    dropzoneElm.appendChild(dropzonePlaceholderElm);
     gridContainerDiv.appendChild(preHeaderDiv);
     preHeaderDiv.appendChild(dropzoneElm);
     document.body.appendChild(gridContainerDiv);
@@ -402,17 +398,18 @@ describe('Draggable Grouping Plugin', () => {
       fn.sortableLeftInstance!.options.onStart!({} as any);
       plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any);
       fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any);
+      const dropzonePlaceholderElm = dropzoneElm.querySelector('.slick-draggable-dropzone-placeholder');
 
       const dragoverEvent = new CustomEvent('dragover', { bubbles: true, detail: {} });
-      dropzonePlaceholderElm.dispatchEvent(dragoverEvent);
+      dropzonePlaceholderElm?.dispatchEvent(dragoverEvent);
 
       const dragenterEvent = new CustomEvent('dragenter', { bubbles: true, detail: {} });
-      dropzonePlaceholderElm.dispatchEvent(dragenterEvent);
-      expect(dropzoneElm.classList.contains('slick-dropzone-placeholder-hover')).toBeTruthy();
+      dropzonePlaceholderElm?.dispatchEvent(dragenterEvent);
+      expect(dropzoneElm.classList.contains('slick-dropzone-hover')).toBeTruthy();
 
       const dragleaveEvent = new CustomEvent('dragleave', { bubbles: true, detail: {} });
-      dropzonePlaceholderElm.dispatchEvent(dragleaveEvent);
-      expect(dropzoneElm.classList.contains('slick-dropzone-placeholder-hover')).toBeFalsy();
+      dropzonePlaceholderElm?.dispatchEvent(dragleaveEvent);
+      expect(dropzoneElm.classList.contains('slick-dropzone-hover')).toBeFalsy();
     });
 
     describe('setupColumnDropbox method', () => {
@@ -480,7 +477,6 @@ describe('Draggable Grouping Plugin', () => {
         it('should call "clearDroppedGroups" and expect the grouping to be cleared', () => {
           const preHeaderElm = document.querySelector('.slick-preheader-panel') as HTMLDivElement;
           let dropboxPlaceholderElm = preHeaderElm.querySelector('.slick-draggable-dropzone-placeholder') as HTMLDivElement;
-          expect(dropboxPlaceholderElm.style.display).toBe('none');
 
           plugin.clearDroppedGroups();
           dropboxPlaceholderElm = preHeaderElm.querySelector('.slick-draggable-dropzone-placeholder') as HTMLDivElement;
diff --git a/packages/common/src/extensions/slickDraggableGrouping.ts b/packages/common/src/extensions/slickDraggableGrouping.ts
index ba16542db..4bdd42ae1 100644
--- a/packages/common/src/extensions/slickDraggableGrouping.ts
+++ b/packages/common/src/extensions/slickDraggableGrouping.ts
@@ -302,7 +302,7 @@ export class SlickDraggableGrouping {
       // },
       onStart: () => {
         if (draggablePlaceholderElm) {
-          draggablePlaceholderElm.style.display = 'none';
+          draggablePlaceholderElm.style.display = 'inline-block';
         }
         const droppedGroupingElms = dropzoneElm.querySelectorAll<HTMLDivElement>('.slick-dropped-grouping');
         droppedGroupingElms.forEach(droppedGroupingElm => droppedGroupingElm.style.display = 'none');
@@ -324,8 +324,6 @@ export class SlickDraggableGrouping {
           if (groupTogglerElm) {
             groupTogglerElm.style.display = 'inline-block';
           }
-        } else if (draggablePlaceholderElm) {
-          draggablePlaceholderElm.style.display = 'inline-block';
         }
 
         if (!grid.getEditorLock().commitCurrentEdit()) {
@@ -538,12 +536,12 @@ export class SlickDraggableGrouping {
   }
 
   protected addDragOverDropzoneListeners() {
-    const draggablePlaceholderElm = this._dropzoneElm.querySelector('.slick-placeholder');
+    const draggablePlaceholderElm = this._dropzoneElm.querySelector('.slick-draggable-dropzone-placeholder');
 
-    if (draggablePlaceholderElm) {
+    if (draggablePlaceholderElm && this._dropzoneElm) {
       this._bindingEventService.bind(draggablePlaceholderElm, 'dragover', (e) => e.preventDefault);
-      this._bindingEventService.bind(draggablePlaceholderElm, 'dragenter', () => this._dropzoneElm.classList.add('slick-dropzone-placeholder-hover'));
-      this._bindingEventService.bind(draggablePlaceholderElm, 'dragleave', () => this._dropzoneElm.classList.remove('slick-dropzone-placeholder-hover'));
+      this._bindingEventService.bind(draggablePlaceholderElm, 'dragenter', () => this._dropzoneElm.classList.add('slick-dropzone-hover'));
+      this._bindingEventService.bind(draggablePlaceholderElm, 'dragleave', () => this._dropzoneElm.classList.remove('slick-dropzone-hover'));
     }
   }
 
diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
index b24a629be..590823538 100644
--- a/packages/common/src/styles/slick-plugins.scss
+++ b/packages/common/src/styles/slick-plugins.scss
@@ -907,6 +907,7 @@ input.flatpickr.form-control {
     .slick-draggable-dropzone-placeholder {
       font-style: var(--slick-draggable-group-placeholder-font-style, $slick-draggable-group-placeholder-font-style);
       color: var(--slick-draggable-group-placeholder-color, $slick-draggable-group-placeholder-color);
+      width: 100%;
     }
 
     .slick-group-toggle-all {