fix: jQuery event types contain excessive props but lack originalEvent (DevExpress#30009)

VasilyStrelyaev · web-flow · commit 8c821c2887aa · 2025-08-20T10:15:08.000+02:00
diff --git a/e2e/compilation-cases/T1282141.ts b/e2e/compilation-cases/T1282141.ts
@@ -0,0 +1,66 @@
+import { CutEvent } from 'devextreme/js/ui/color_box';
+import { EVENT_PROPERTIES } from 'devextreme/js/__internal/events/core/m_consts';
+
+type NATIVE_EVENT_ARGS = KeyboardEvent
+  & PointerEvent
+  & TouchEvent
+  & FocusEvent
+  & WheelEvent
+  & ClipboardEvent;
+
+type NATIVE_EVENT_ARG_NON_PROPS = Pick<KeyboardEvent,
+    'getModifierState'
+    | 'initKeyboardEvent'
+    | 'DOM_KEY_LOCATION_STANDARD'
+    | 'DOM_KEY_LOCATION_LEFT'
+    | 'DOM_KEY_LOCATION_RIGHT'
+    | 'DOM_KEY_LOCATION_NUMPAD'>
+  & Pick<UIEvent, 'initUIEvent'>
+  & Pick<Event,
+    'composedPath'
+    | 'initEvent'
+    | 'preventDefault'
+    | 'stopImmediatePropagation'
+    | 'stopPropagation'
+    | 'NONE'
+    | 'CAPTURING_PHASE'
+    | 'AT_TARGET'
+    | 'BUBBLING_PHASE'>
+  & Pick<PointerEvent, 'getCoalescedEvents' | 'getPredictedEvents'>
+  & Pick<MouseEvent, 'initMouseEvent'>
+  & Pick<WheelEvent, 'DOM_DELTA_PIXEL' | 'DOM_DELTA_LINE' | 'DOM_DELTA_PAGE'>;
+
+type PROPS_ASSIGNED_ELSEWHERE = {
+  type: string;
+  isTrusted: boolean;
+  timeStamp: number;
+  which: number;
+  currentTarget: EventTarget | null;
+
+  // touch hooks
+  clientX: number;
+  clientY: number;
+  pageX: number;
+  pageY: number;
+  screenX: number;
+  screenY: number;
+}
+
+type IGNORED_MEMBERS = NATIVE_EVENT_ARG_NON_PROPS & PROPS_ASSIGNED_ELSEWHERE;
+
+type ASSIGNED_EVENT_ARG_GETTERS = {
+  [Property in typeof EVENT_PROPERTIES[number]]
+};
+
+function fn(): void {
+  let e: CutEvent = undefined as unknown as CutEvent;
+
+  e.event?.originalEvent.clipboardData?.clearData();
+
+  let dxGetters = undefined as unknown as ASSIGNED_EVENT_ARG_GETTERS & IGNORED_MEMBERS;
+  let nativeArgs = undefined as unknown as NATIVE_EVENT_ARGS;
+
+  nativeArgs = dxGetters;
+}
+
+
diff --git a/packages/devextreme/js/__internal/events/core/m_consts.ts b/packages/devextreme/js/__internal/events/core/m_consts.ts
@@ -0,0 +1,74 @@
+/* eslint-disable spellcheck/spell-checker */
+export const EMPTY_EVENT_NAME = 'dxEmptyEventType';
+export const NATIVE_EVENTS_TO_SUBSCRIBE = {
+  mouseenter: 'mouseover',
+  mouseleave: 'mouseout',
+  pointerenter: 'pointerover',
+  pointerleave: 'pointerout',
+};
+export const NATIVE_EVENTS_TO_TRIGGER = {
+  focusin: 'focus',
+  focusout: 'blur',
+};
+export const NO_BUBBLE_EVENTS = ['blur', 'focus', 'load'];
+
+export const forcePassiveFalseEventNames = ['touchmove', 'wheel', 'mousewheel', 'touchstart'];
+
+export const EVENT_PROPERTIES = [
+  'altKey',
+  'altitudeAngle',
+  'azimuthAngle',
+  'bubbles',
+  'button',
+  'buttons',
+  'cancelable',
+  'cancelBubble',
+  'changedTouches',
+  'char',
+  'charCode',
+  'clipboardData',
+  'code',
+  'composed',
+  'ctrlKey',
+  'defaultPrevented',
+  'delegateTarget',
+  'deltaMode',
+  'deltaX',
+  'deltaY',
+  'deltaZ',
+  'detail',
+  'eventPhase',
+  'height',
+  'isComposing',
+  'isPrimary',
+  'key',
+  'keyCode',
+  'layerX',
+  'layerY',
+  'location',
+  'metaKey',
+  'movementX',
+  'movementY',
+  'offsetX',
+  'offsetY',
+  'pointerId',
+  'pointerType',
+  'pressure',
+  'relatedTarget',
+  'repeat',
+  'returnValue',
+  'srcElement',
+  'shiftKey',
+  'tangentialPressure',
+  'target',
+  'targetTouches',
+  'tiltX',
+  'tiltY',
+  'toElement',
+  'touches',
+  'twist',
+  'view',
+  'width',
+  'x',
+  'y',
+] as const;
diff --git a/packages/devextreme/js/__internal/events/core/m_events_engine.ts b/packages/devextreme/js/__internal/events/core/m_events_engine.ts
@@ -11,55 +11,17 @@ import {
   isFunction, isObject, isString, isWindow,
 } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
+import {
+  EMPTY_EVENT_NAME,
+  EVENT_PROPERTIES,
+  forcePassiveFalseEventNames,
+  NATIVE_EVENTS_TO_SUBSCRIBE,
+  NATIVE_EVENTS_TO_TRIGGER,
+  NO_BUBBLE_EVENTS,
+} from '@ts/events/core/m_consts';
 
 const window = getWindow();
 
-/* eslint-disable spellcheck/spell-checker */
-const EMPTY_EVENT_NAME = 'dxEmptyEventType';
-const NATIVE_EVENTS_TO_SUBSCRIBE = {
-  mouseenter: 'mouseover',
-  mouseleave: 'mouseout',
-  pointerenter: 'pointerover',
-  pointerleave: 'pointerout',
-};
-const NATIVE_EVENTS_TO_TRIGGER = {
-  focusin: 'focus',
-  focusout: 'blur',
-};
-const NO_BUBBLE_EVENTS = ['blur', 'focus', 'load'];
-
-const forcePassiveFalseEventNames = ['touchmove', 'wheel', 'mousewheel', 'touchstart'];
-
-const EVENT_PROPERTIES = [
-  'target',
-  'relatedTarget',
-  'delegateTarget',
-  'altKey',
-  'bubbles',
-  'cancelable',
-  'changedTouches',
-  'ctrlKey',
-  'detail',
-  'eventPhase',
-  'metaKey',
-  'shiftKey',
-  'view',
-  'char',
-  'code',
-  'charCode',
-  'key',
-  'keyCode',
-  'button',
-  'buttons',
-  'offsetX',
-  'offsetY',
-  'pointerId',
-  'pointerType',
-  'targetTouches',
-  'toElement',
-  'touches',
-];
-
 function matchesSafe(target, selector) {
   return !isWindow(target) && target.nodeName !== '#document' && domAdapter.elementMatches(target, selector);
 }
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.tsx b/packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/header.tsx
@@ -3,15 +3,14 @@ import messageLocalization from '@js/localization/message';
 import type { ValueChangedEvent } from '@js/ui/check_box';
 import type * as dxToolbar from '@js/ui/toolbar';
 import { isDefined } from '@ts/core/utils/m_type';
+import type { SelectCardOptions } from '@ts/grids/new/card_view/content_view/types';
 import type { CardInfo } from '@ts/grids/new/grid_core/columns_controller/types';
 import { Toolbar } from '@ts/grids/new/grid_core/inferno_wrappers/toolbar';
 import type { DefaultToolbarItem } from '@ts/grids/new/grid_core/toolbar/types';
 import { normalizeToolbarItems } from '@ts/grids/new/grid_core/toolbar/utils';
 import type { ComponentType } from 'inferno';
 import { Component } from 'inferno';
 
-import type { SelectCardOptions } from '../../types';
-
 export const CLASSES = {
   cardHeader: 'dx-cardview-card-header',
   cardSelectCheckBox: 'dx-cardview-select-checkbox',
diff --git a/packages/devextreme/js/__internal/ui/context_menu/context_menu.ts b/packages/devextreme/js/__internal/ui/context_menu/context_menu.ts
@@ -588,7 +588,7 @@ class ContextMenu<
     }
   }
 
-  _hoverEndHandler(e: DxEvent<HoverEvent>): void {
+  _hoverEndHandler(e: HoverEvent): void {
     super._hoverEndHandler(e);
     e.stopPropagation();
   }
@@ -1181,7 +1181,6 @@ class ContextMenu<
       this._setAriaAttributes();
 
       // T983617. Prevent the browser's context menu appears on desktop touch screens.
-      // @ts-expect-error ts-error
       if (event?.originalEvent?.type === holdEvent.name) {
         this.preventShowingDefaultContextMenuAboveOverlay();
       }
diff --git a/packages/devextreme/js/__internal/ui/context_menu/menu_base.ts b/packages/devextreme/js/__internal/ui/context_menu/menu_base.ts
@@ -353,7 +353,7 @@ class MenuBase<
     }
   }
 
-  _hoverStartHandler(e: DxEvent<HoverEvent>): void {
+  _hoverStartHandler(e: HoverEvent): void {
     const $itemElement = this._getItemElementByEventArgs(e);
 
     if (!$itemElement || this._isItemDisabled($itemElement)) return;
@@ -434,7 +434,7 @@ class MenuBase<
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _hoverEndHandler(event: DxEvent<HoverEvent>): void {
+  _hoverEndHandler(event: HoverEvent): void {
     clearTimeout(this._showSubmenusTimeout);
   }
 
diff --git a/packages/devextreme/js/events/events.types.d.ts b/packages/devextreme/js/events/events.types.d.ts
@@ -1,7 +1,7 @@
 /**
  * @namespace DevExpress.events
  */
-export type EventObject = {
+export type EventObject<TNativeEvent = Event> = {
   /**
    * @docid
    * @public
@@ -20,6 +20,13 @@ export type EventObject = {
    */
   delegateTarget: Element;
 
+  /**
+   * @docid
+   * @public
+   * @type event
+   */
+  originalEvent: TNativeEvent;
+
   /**
    * @docid
    * @public
@@ -79,7 +86,16 @@ export interface EventType { }
  * @type EventObject|jQuery.Event
  *
  */
-export type DxEvent<TNativeEvent = Event> = {} extends EventType ? (EventObject & TNativeEvent) : EventType;
+export type DxEvent<TNativeEvent = Event> = {} extends EventType
+  ? (EventObject<TNativeEvent> & TNativeEvent)
+  : (Omit<EventType, 'originalEvent'> & {
+    /**
+     * @docid
+     * @public
+     * @type event
+     */
+    originalEvent: TNativeEvent;
+  });
 
 /** @deprecated EventObject */
 export type dxEvent = EventObject;
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.events/eventsEngine.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.events/eventsEngine.tests.js
@@ -3,6 +3,8 @@ import eventsEngine from 'common/core/events/core/events_engine';
 import keyboardMock from '../../helpers/keyboardMock.js';
 import registerEvent from 'common/core/events/core/event_registrator';
 import { compare as compareVersion } from 'core/utils/version';
+import { EVENT_PROPERTIES } from '__internal/events/core/m_consts';
+import config from 'core/config';
 
 QUnit.module('base');
 
@@ -258,6 +260,26 @@ QUnit.test('Simulate clicks, check which property', function(assert) {
     }
 });
 
+QUnit.test('Check getters attached to event wrappers', function(assert) {
+    const done = assert.async();
+    const useJQuery = config().useJQuery;
+    const div = document.createElement('div');
+    const handler = function(e) {
+        if(e instanceof eventsEngine.Event && !useJQuery) {
+            EVENT_PROPERTIES.forEach(prop => { assert.ok(prop in e, `getter for the '${prop}' prop found in the event arg`); });
+        } else {
+            assert.ok(true);
+        }
+        done();
+    };
+
+    document.body.appendChild(div);
+    eventsEngine.on(div, 'click', handler);
+    const event = div.ownerDocument.createEvent('MouseEvents');
+    event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
+    div.dispatchEvent(event);
+});
+
 QUnit.test('Simulate tab press, check key property', function(assert) {
     const done = assert.async();
     const input = document.createElement('input');
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
@@ -7790,8 +7790,13 @@ declare module DevExpress.events {
    * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
    */
   export type DxEvent<TNativeEvent = Event> = {} extends EventType
-    ? EventObject & TNativeEvent
-    : EventType;
+    ? EventObject<TNativeEvent> & TNativeEvent
+    : Omit<EventType, 'originalEvent'> & {
+        /**
+         * [descr:DxEvent.originalEvent]
+         */
+        originalEvent: TNativeEvent;
+      };
   /**
    * [descr:event]
    * @deprecated [depNote:event]
@@ -7801,7 +7806,7 @@ declare module DevExpress.events {
   /**
    * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution.
    */
-  export type EventObject = {
+  export type EventObject<TNativeEvent = Event> = {
     /**
      * [descr:EventObject.currentTarget]
      */
@@ -7817,6 +7822,11 @@ declare module DevExpress.events {
      */
     delegateTarget: Element;
 
+    /**
+     * [descr:EventObject.originalEvent]
+     */
+    originalEvent: TNativeEvent;
+
     /**
      * [descr:EventObject.target]
      */

Original file line number	Diff line number	Diff line change
`@@ -588,7 +588,7 @@ class ContextMenu<`
`588`	`588`	`}`
`589`	`589`	`}`
`590`	`590`
`591`		`- _hoverEndHandler(e: DxEvent<HoverEvent>): void {`
	`591`	`+ _hoverEndHandler(e: HoverEvent): void {`
`592`	`592`	`super._hoverEndHandler(e);`
`593`	`593`	`e.stopPropagation();`
`594`	`594`	`}`
`@@ -1181,7 +1181,6 @@ class ContextMenu<`
`1181`	`1181`	`this._setAriaAttributes();`
`1182`	`1182`
`1183`	`1183`	`// T983617. Prevent the browser's context menu appears on desktop touch screens.`
`1184`		`- // @ts-expect-error ts-error`
`1185`	`1184`	`if (event?.originalEvent?.type === holdEvent.name) {`
`1186`	`1185`	`this.preventShowingDefaultContextMenuAboveOverlay();`
`1187`	`1186`	`}`
Original file line number	Diff line number	Diff line change
`@@ -353,7 +353,7 @@ class MenuBase<`
`353`	`353`	`}`
`354`	`354`	`}`
`355`	`355`
`356`		`- _hoverStartHandler(e: DxEvent<HoverEvent>): void {`
	`356`	`+ _hoverStartHandler(e: HoverEvent): void {`
`357`	`357`	`const $itemElement = this._getItemElementByEventArgs(e);`
`358`	`358`
`359`	`359`	`if (!$itemElement \|\| this._isItemDisabled($itemElement)) return;`
`@@ -434,7 +434,7 @@ class MenuBase<`
`434`	`434`	`}`
`435`	`435`
`436`	`436`	`// eslint-disable-next-line @typescript-eslint/no-unused-vars`
`437`		`- _hoverEndHandler(event: DxEvent<HoverEvent>): void {`
	`437`	`+ _hoverEndHandler(event: HoverEvent): void {`
`438`	`438`	`clearTimeout(this._showSubmenusTimeout);`
`439`	`439`	`}`
`440`	`440`