fix: Editors/Filters should create SlickEventData with event arg (#1326)

- the previous code was to extend a SlickEventData with an Event but the correct way is to simply pass the Event to SlickEventData as the first argument and we're done

examples/vite-demo-vanilla-bundle/src/examples/example12.ts

@@ -92,7 +92,7 @@ export default class Example12 {
   gridOptions: GridOption;
   dataset: any[] = [];
   isGridEditable = true;
-  editQueue: Array<{ item, columns: Column[], editCommand }> = [];
+  editQueue: Array<{ item, columns: Column[], editCommand; }> = [];
   editedItems = {};
   isCompositeDisabled = false;
   isMassSelectionDisabled = true;

packages/common/src/editors/autocompleterEditor.ts

@@ -454,7 +454,7 @@ export class AutocompleterEditor<T extends AutocompleteItem = any> implements Ed
     }
     grid.onCompositeEditorChange.notify(
       { ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues, editors: compositeEditorOptions.editors, triggeredBy },
-      { ...new SlickEventData(), ...event as Event }
+      new SlickEventData(event)
     );
   }
 

packages/common/src/editors/checkboxEditor.ts

@@ -317,7 +317,7 @@ export class CheckboxEditor implements Editor {
     }
     grid.onCompositeEditorChange.notify(
       { ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues, editors: compositeEditorOptions.editors, triggeredBy },
-      { ...new SlickEventData(), ...event as Event }
+      new SlickEventData(event)
     );
   }
 }

packages/common/src/editors/dualInputEditor.ts

@@ -540,7 +540,7 @@ export class DualInputEditor implements Editor {
     }
     grid.onCompositeEditorChange.notify(
       { ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues, editors: compositeEditorOptions.editors, triggeredBy },
-      { ...new SlickEventData(), ...event as Event }
+      new SlickEventData(event)
     );
   }
 

packages/common/src/editors/inputEditor.ts

@@ -325,7 +325,7 @@ export class InputEditor implements Editor {
     }
     grid.onCompositeEditorChange.notify(
       { ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues, editors: compositeEditorOptions.editors, triggeredBy },
-      { ...new SlickEventData(), ...event as Event }
+      new SlickEventData(event)
     );
   }
 

packages/common/src/editors/longTextEditor.ts

@@ -476,7 +476,7 @@ export class LongTextEditor implements Editor {
     }
     grid.onCompositeEditorChange.notify(
       { ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues, editors: compositeEditorOptions.editors, triggeredBy },
-      { ...new SlickEventData(), ...event as Event }
+      new SlickEventData(event)
     );
   }
 

packages/common/src/editors/sliderEditor.ts

@@ -378,7 +378,7 @@ export class SliderEditor implements Editor {
       if (!this.args?.compositeEditorOptions) {
         this.grid.onMouseEnter.notify(
           { column: this.columnDef, grid: this.grid },
-          { ...new SlickEventData(), ...{ target: event?.target } as Event }
+          new SlickEventData(event)
         );
       }
     }
@@ -405,7 +405,7 @@ export class SliderEditor implements Editor {
     }
     grid.onCompositeEditorChange.notify(
       { ...activeCell, item, grid, column, formValues: compositeEditorOptions.formValues, editors: compositeEditorOptions.editors, triggeredBy },
-      { ...new SlickEventData(), ...event as Event }
+      new SlickEventData(event)
     );
   }
 

packages/common/src/filters/sliderFilter.ts

@@ -416,10 +416,7 @@ export class SliderFilter implements Filter {
 
     // trigger mouse enter event on the filter for optionally hooked SlickCustomTooltip
     // the minimum requirements for tooltip to work are the columnDef and targetElement
-    this.grid.onHeaderRowMouseEnter.notify(
-      { column: this.columnDef, grid: this.grid },
-      { ...new SlickEventData(), ...{ target: this._argFilterContainerElm } as unknown as Event }
-    );
+    this.grid.onHeaderRowMouseEnter.notify({ column: this.columnDef, grid: this.grid }, new SlickEventData(e));
   }
 
   protected changeBothSliderFocuses(isAddingFocus: boolean) {
@@ -428,7 +425,7 @@ export class SliderFilter implements Filter {
     this._sliderRightInputElm?.classList[addRemoveCmd]('focus');
   }
 
-  protected slideLeftInputChanged() {
+  protected slideLeftInputChanged(e: Event) {
     const sliderLeftVal = parseInt(this._sliderLeftInputElm?.value ?? '', 10);
     const sliderRightVal = parseInt(this._sliderRightInputElm?.value ?? '', 10);
 
@@ -449,21 +446,21 @@ export class SliderFilter implements Filter {
       }
     }
 
-    this.sliderLeftOrRightChanged(sliderLeftVal, sliderRightVal);
+    this.sliderLeftOrRightChanged(e, sliderLeftVal, sliderRightVal);
   }
 
-  protected slideRightInputChanged() {
+  protected slideRightInputChanged(e: Event) {
     const sliderLeftVal = parseInt(this._sliderLeftInputElm?.value ?? '', 10);
     const sliderRightVal = parseInt(this._sliderRightInputElm?.value ?? '', 10);
 
     if (this.sliderType === 'double' && this._sliderRightInputElm && sliderRightVal - sliderLeftVal <= ((this.columnFilter.filterOptions as SliderRangeOption)?.stopGapBetweenSliderHandles ?? GAP_BETWEEN_SLIDER_HANDLES)) {
       this._sliderRightInputElm.value = String(sliderLeftVal + ((this.columnFilter.filterOptions as SliderRangeOption)?.stopGapBetweenSliderHandles ?? GAP_BETWEEN_SLIDER_HANDLES));
     }
 
-    this.sliderLeftOrRightChanged(sliderLeftVal, sliderRightVal);
+    this.sliderLeftOrRightChanged(e, sliderLeftVal, sliderRightVal);
   }
 
-  protected sliderLeftOrRightChanged(sliderLeftVal: number, sliderRightVal: number) {
+  protected sliderLeftOrRightChanged(e: Event, sliderLeftVal: number, sliderRightVal: number) {
     this.updateTrackFilledColorWhenEnabled();
     this.changeBothSliderFocuses(true);
     this._sliderRangeContainElm.title = this.sliderType === 'double' ? `${sliderLeftVal} - ${sliderRightVal}` : `${sliderRightVal}`;
@@ -479,10 +476,7 @@ export class SliderFilter implements Filter {
     }
 
     // also trigger mouse enter event on the filter in case a SlickCustomTooltip is attached
-    this.grid.onHeaderRowMouseEnter.notify(
-      { column: this.columnDef, grid: this.grid },
-      { ...new SlickEventData(), ...{ target: this._argFilterContainerElm } as unknown as Event }
-    );
+    this.grid.onHeaderRowMouseEnter.notify({ column: this.columnDef, grid: this.grid }, new SlickEventData(e));
   }
 
   protected sliderTrackClicked(e: MouseEvent) {