Scheduler: T1308596 — "Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect')" is thrown when dragging an appointment while an onAppointmentUpdating promise is pending (#31572)

Author: sjbur

e2e/testcafe-devextreme/tests/scheduler/common/dragAndDrop/dragEvents.ts

@@ -127,3 +127,48 @@ TEST_CASES.forEach(({ view, expectedToItemData }) => {
     await clearCallbackTesting();
   });
 });
+
+test('Should block appointment dragging while onAppointmentUpdating Promise is pending (T1308596)', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+  const appointment = scheduler.getAppointment('Test Appointment');
+
+  const targetCell1 = scheduler.getDateTableCell(18, 2);
+  const targetCell2 = scheduler.getDateTableCell(18, 5);
+
+  const initialPosition = await appointment.element.boundingClientRect;
+
+  await t.dragToElement(appointment.element, targetCell1, { speed: 1 });
+  await t.dragToElement(appointment.element, targetCell2, { speed: 1 });
+  await t.dragToElement(appointment.element, targetCell2, { speed: 1 });
+  await t.dragToElement(appointment.element, targetCell2, { speed: 1 });
+
+  await t.wait(6000);
+
+  const positionAfterPromiseResolved = await appointment.element.boundingClientRect;
+  const cell1Position = await targetCell1.boundingClientRect;
+
+  await t
+    .expect(positionAfterPromiseResolved.left)
+    .notEql(initialPosition.left)
+    .expect(positionAfterPromiseResolved.left)
+    .eql(cell1Position.left);
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [{
+      text: 'Test Appointment',
+      startDate: new Date(2023, 0, 2, 10, 0),
+      endDate: new Date(2023, 0, 2, 11, 0),
+    }],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2023, 0, 2),
+    height: 600,
+    onAppointmentUpdating: (e) => {
+      e.cancel = new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(false);
+        }, 5000);
+      });
+    },
+  });
+});

packages/devextreme/js/__internal/scheduler/m_appointment_drag_behavior.ts

@@ -96,6 +96,11 @@ export default class AppointmentDragBehavior {
       e.itemData = this.getItemData(e.itemElement);
       e.itemSettings = this.getItemSettings(e.itemElement);
 
+      if (this.scheduler._isAppointmentBeingUpdated(e.itemData)) {
+        e.cancel = true;
+        return;
+      }
+
       appointmentDragging.onDragStart?.(e);
 
       if (!e.cancel) {
@@ -106,6 +111,16 @@ export default class AppointmentDragBehavior {
 
   createDragMoveHandler(options, appointmentDragging) {
     return (e) => {
+      if (!this.appointmentInfo) {
+        e.cancel = true;
+        return;
+      }
+
+      if (this.scheduler._isAppointmentBeingUpdated(this.appointmentInfo.appointment)) {
+        e.cancel = true;
+        return;
+      }
+
       appointmentDragging.onDragMove?.(e);
 
       if (!e.cancel) {
@@ -116,6 +131,11 @@ export default class AppointmentDragBehavior {
 
   createDragEndHandler(options, appointmentDragging) {
     return (e) => {
+      if (!this.appointmentInfo) {
+        e.cancel = true;
+        return;
+      }
+
       const updatedData = this.appointments.invoke('getUpdatedData', e.itemData);
 
       this.appointmentInfo = null;

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -199,6 +199,8 @@ class Scheduler extends SchedulerOptionsBaseWidget {
 
   _asyncTemplatesTimers!: any[];
 
+  _updatingAppointments: Set<Appointment> = new Set();
+
   _dataSourceLoadedCallback: any;
 
   _subscribes: any;
@@ -1754,6 +1756,10 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       dragEvent.cancel = new Deferred();
     }
 
+    if (isPromise(updatingOptions.cancel) && dragEvent) {
+      this._updatingAppointments.add(target);
+    }
+
     return this._processActionResult(updatingOptions, function (canceled) {
       // @ts-expect-error
       let deferred = new Deferred();
@@ -1767,14 +1773,19 @@ class Scheduler extends SchedulerOptionsBaseWidget {
             .done(() => {
               dragEvent?.cancel.resolve(false);
             })
-            .always((storeAppointment) => this._onDataPromiseCompleted(StoreEventNames.UPDATED, storeAppointment))
+            .always((storeAppointment) => {
+              this._updatingAppointments.delete(target);
+              this._onDataPromiseCompleted(StoreEventNames.UPDATED, storeAppointment);
+            })
             .fail(() => performFailAction());
         } catch (err) {
           performFailAction(err);
+          this._updatingAppointments.delete(target);
           deferred.resolve();
         }
       } else {
         performFailAction();
+        this._updatingAppointments.delete(target);
         deferred.resolve();
       }
 
@@ -2145,6 +2156,10 @@ class Scheduler extends SchedulerOptionsBaseWidget {
     return this._workSpace.dragBehavior;
   }
 
+  _isAppointmentBeingUpdated(appointmentData: Appointment): boolean {
+    return this._updatingAppointments.has(appointmentData);
+  }
+
   getViewOffsetMs(): number {
     const offsetFromOptions = this.getViewOption('offset');
     return this.normalizeViewOffsetValue(offsetFromOptions);

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

@@ -511,7 +511,13 @@ class SchedulerWorkSpace extends Widget<WorkspaceOptionsInternal> {
 
     const isMultiSelectionAllowed = this.option('allowMultipleCellSelection');
     const currentCellData = this._getFullCellData($cell);
-    const focusedCellData = this.cellsSelectionState.getFocusedCell().cellData;
+    const focusedCell = this.cellsSelectionState.getFocusedCell();
+
+    if (!focusedCell) {
+      return;
+    }
+
+    const focusedCellData = focusedCell.cellData;
 
     const nextFocusedCellData = this.cellsSelectionController.moveToCell({
       isMultiSelection,