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

Author: sjbur

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/scheduler.ts

@@ -76,6 +76,20 @@ export class SchedulerModel {
     return getTexts(cells);
   }
 
+  getDateTableCell(rowIndex = 0, cellIndex = 0): HTMLElement {
+    const rowSelector = `.dx-scheduler-date-table-row:nth-child(${rowIndex + 1})`;
+    const cellSelector = `.dx-scheduler-date-table-cell:nth-child(${cellIndex + 1})`;
+    const selector = `${rowSelector} ${cellSelector}`;
+
+    const result = this.container.querySelector(selector);
+
+    if (!result) {
+      throw new Error(`Date cell in row ${rowIndex} and column ${cellIndex} not found`);
+    }
+
+    return result as HTMLElement;
+  }
+
   getHeaderPanelContent(): string[] {
     const cells = this.container.querySelectorAll('.dx-scheduler-header-panel-cell');
     return getTexts(cells);

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

@@ -1217,7 +1217,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);
@@ -1229,7 +1229,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,