Scheduler: T1187849 — Fix multi-cell selection on touch monitors (#33502)

Author: sjbur

packages/devextreme/js/__internal/scheduler/__tests__/selection_end_event.test.ts

@@ -0,0 +1,51 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import { fireEvent } from '@testing-library/dom';
+import support from '@ts/core/utils/m_support';
+
+import fx from '../../../common/core/animation/fx';
+import { createScheduler } from './__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__mock__/m_mock_scheduler';
+
+const defaultOptions = {
+  currentView: 'week',
+  views: ['week'],
+  currentDate: new Date(2024, 0, 1),
+  startDayHour: 9,
+  endDayHour: 16,
+  height: 600,
+};
+
+describe('onSelectionEnd', () => {
+  beforeEach(() => {
+    fx.off = true;
+    setupSchedulerTestEnvironment({ height: 600 });
+  });
+
+  afterEach(() => {
+    fx.off = false;
+    document.body.innerHTML = '';
+  });
+
+  it('T1187849: should select cells with mouse on touch monitor', async () => {
+    const originalSupportTouch = support.touch;
+    support.touch = true;
+
+    const { POM, scheduler } = await createScheduler(defaultOptions);
+    const firstCell = POM.getDateTableCell(0, 0);
+    const secondCell = POM.getDateTableCell(1, 0);
+
+    expect(scheduler.getWorkSpace().getScrollable().option('scrollByContent')).toBe(true);
+
+    fireEvent.mouseDown(firstCell, { which: 1 });
+    fireEvent.mouseMove(secondCell, { which: 1 });
+    fireEvent.mouseUp(secondCell, { which: 1 });
+
+    expect(scheduler.option('selectedCellData')).toHaveLength(2);
+    expect(firstCell.classList.contains('dx-state-focused')).toBe(true);
+    expect(secondCell.classList.contains('dx-state-focused')).toBe(true);
+
+    support.touch = originalSupportTouch;
+  });
+});

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts

@@ -1220,7 +1220,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     (eventsEngine.off as any)(element, SCHEDULER_CELL_DXPOINTERDOWN_EVENT_NAME);
 
     eventsEngine.on(element, SCHEDULER_CELL_DXPOINTERDOWN_EVENT_NAME, DRAG_AND_DROP_SELECTOR, (e) => {
-      if (isMouseEvent(e) && e.which === 1) {
+      if ((isMouseEvent(e) || (e.originalEvent && isMouseEvent(e.originalEvent))) && e.which === 1) {
         isPointerDown = true;
         (this.$element() as any).addClass(WORKSPACE_WITH_MOUSE_SELECTION_CLASS);
         (eventsEngine.off as any)(domAdapter.getDocument(), SCHEDULER_CELL_DXPOINTERUP_EVENT_NAME);
@@ -1232,7 +1232,7 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
     });
 
     eventsEngine.on(element, SCHEDULER_CELL_DXPOINTERMOVE_EVENT_NAME, DRAG_AND_DROP_SELECTOR, (e) => {
-      if (isPointerDown && this._dateTableScrollable && !this._dateTableScrollable.option('scrollByContent')) {
+      if (isPointerDown && this._dateTableScrollable) {
         e.preventDefault();
         e.stopPropagation();
         this.moveToCell($(e.target), true);

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/workSpace.navigation.tests.js

@@ -779,32 +779,6 @@ module('Workspace navigation', () => {
                     assert.equal(cells.filter('.dx-state-focused').length, 1, 'right quantity of focused cells');
                 });
 
-                test('It should not be possible to select cells via mouse if scrollable \'scrollByContent\' is true', async function(assert) {
-                    const $element = this.createInstance({
-                        focusStateEnabled: true,
-                        firstDayOfWeek: 1,
-                        currentDate: new Date(2015, 3, 1),
-                        height: 400,
-                        allowMultipleCellSelection: true,
-                        onContentReady: function(e) {
-                            const scrollable = e.component._dateTableScrollable;
-                            scrollable.option('scrollByContent', true);
-                        },
-                    }, 'dxSchedulerWorkSpaceMonth');
-                    const workspace = $element.dxSchedulerWorkSpaceMonth('instance');
-
-                    const stub = sinon.stub(workspace, 'notifyObserver');
-
-                    const cells = $element.find('.' + CELL_CLASS);
-                    const cell = cells.eq(23).get(0);
-                    const $table = $element.find('.dx-scheduler-date-table');
-
-                    pointerMock(cells.eq(2)).start().click();
-                    $($table).trigger($.Event('dxpointermove', { target: cell, toElement: cell, which: 1 }));
-
-                    assert.notOk(stub.calledOnce, 'Cells weren\'t selected');
-                });
-
                 test('Multiselection with left arrow should work in workspace day', async function(assert) {
                     const $element = this.createInstance({
                         focusStateEnabled: true,