Fix wheel event delta normalization to use deltaY or deltaX for common delta (#30485)

Author: dmalykh-devexpress

packages/devextreme/js/__internal/events/core/m_wheel.ts

@@ -8,7 +8,20 @@ const EVENT_NAMESPACE = 'dxWheel';
 const NATIVE_EVENT_NAME = 'wheel';
 
 const PIXEL_MODE = 0;
-const DELTA_MUTLIPLIER = 30;
+const DELTA_MULTIPLIER = 30;
+
+enum DeltaMode {
+  DOM_DELTA_PIXEL = 0,
+  DOM_DELTA_LINE = 1,
+  DOM_DELTA_PAGE = 2,
+}
+
+interface WheelEvent {
+  deltaMode: DeltaMode;
+  deltaX: number;
+  deltaY: number;
+  deltaZ: number;
+}
 
 const wheel = {
   setup(element) {
@@ -23,13 +36,15 @@ const wheel = {
   _wheelHandler(e) {
     const {
       deltaMode, deltaY, deltaX, deltaZ,
-    } = e.originalEvent;
+    }: WheelEvent = e.originalEvent;
+
+    const delta = this._getWheelDelta(deltaY, deltaX);
 
     fireEvent({
       type: EVENT_NAME,
       originalEvent: e,
       // @ts-expect-error
-      delta: this._normalizeDelta(deltaY, deltaMode),
+      delta: this._normalizeDelta(delta, deltaMode),
       deltaX,
       deltaY,
       deltaZ,
@@ -40,13 +55,25 @@ const wheel = {
     e.stopPropagation();
   },
 
-  _normalizeDelta(delta, deltaMode = PIXEL_MODE) {
+  _normalizeDelta(delta: number, deltaMode = PIXEL_MODE) {
     if (deltaMode === PIXEL_MODE) {
       return -delta;
     }
     // Use multiplier to get rough delta value in px for the LINE or PAGE mode
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1392460
-    return -DELTA_MUTLIPLIER * delta;
+    return -DELTA_MULTIPLIER * delta;
+  },
+
+  _getWheelDelta(deltaY: number, deltaX: number) {
+    if (deltaY) {
+      return deltaY;
+    }
+
+    if (deltaX) {
+      return deltaX;
+    }
+
+    return 0;
   },
 };
 

packages/devextreme/testing/tests/DevExpress.ui.events/wheel.tests.js

@@ -79,3 +79,22 @@ QUnit.test('normalize delta for deltaMode LINE and PAGE', function(assert) {
     assert.strictEqual(wheelHandler.firstCall.args[0].delta, DELTA * DELTA_MULTIPLIER);
     assert.strictEqual(wheelHandler.lastCall.args[0].delta, DELTA * DELTA_MULTIPLIER);
 });
+
+QUnit.test('_getWheelDelta handles different delta combinations correctly', function(assert) {
+    const $element = $('#test');
+    const mouse = nativePointerMock($element).start();
+    let eventArgs;
+
+    $element.on(wheelEvent.name, function(e) {
+        eventArgs = e;
+    });
+
+    mouse.wheel(10, { deltaX: 5, deltaZ: 0 });
+    assert.strictEqual(eventArgs.delta, 10, 'vertical scroll should use deltaY');
+
+    mouse.wheel(0, { deltaX: 5, deltaZ: 0 });
+    assert.strictEqual(eventArgs.delta, -5, 'horizontal scroll should use deltaX when deltaY is 0');
+
+    mouse.wheel(0, { deltaX: 0, deltaZ: 0 });
+    assert.strictEqual(eventArgs.delta, 0, 'should return 0 when all delta values are 0');
+});