Scheduler - Appointment Form - Fix popup jump on group switching (#32944)

Signed-off-by: Eldar Iusupzhanov <84278206+Tucchhaa@users.noreply.github.com>

Author: Tucchhaa

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/form.functional.ts

@@ -7,6 +7,13 @@ fixture.disablePageReloads`Appointment Form: Functional`
 
 const SCHEDULER_SELECTOR = '#container';
 
+const roughEqualClientBoundingRect = (a: TextRectangle, b: TextRectangle): boolean => (
+  Math.abs(a.width - b.width) < 1
+  && Math.abs(a.height - b.height) < 1
+  && Math.abs(a.top - b.top) < 1
+  && Math.abs(a.left - b.left) < 1
+);
+
 test('Subject text editor should have focus after returning from recurrence form', async (t) => {
   const appointment = {
     text: 'Appointment',
@@ -60,3 +67,73 @@ test('Recurrence start date editor should have focus after opening recurrence se
     currentDate: new Date(2021, 2, 25),
   });
 });
+
+test('Popup should not change dimensions when switching groups and recurrence group height is larger', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+
+  await scheduler.openAppointmentPopup(t);
+  const boundingClientRect1 = await scheduler.appointmentPopup.contentElement.boundingClientRect;
+
+  await scheduler.appointmentPopup.selectRepeatValue(t, 'Weekly');
+  const boundingClientRect2 = await scheduler.appointmentPopup.contentElement.boundingClientRect;
+
+  await t.click(scheduler.appointmentPopup.recurrence.backButton);
+  const boundingClientRect3 = await scheduler.appointmentPopup.contentElement.boundingClientRect;
+
+  await t
+    .expect(roughEqualClientBoundingRect(boundingClientRect1, boundingClientRect2)).ok()
+    .expect(roughEqualClientBoundingRect(boundingClientRect1, boundingClientRect3)).ok();
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 25),
+    editing: {
+      form: {
+        items: [
+          {
+            name: 'mainGroup',
+            items: ['repeatGroup'],
+          },
+          'recurrenceGroup',
+        ],
+      },
+    },
+  });
+});
+
+test('Popup should not change dimensions when switching groups and main group height is larger', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+
+  await scheduler.openAppointmentPopup(t);
+  const boundingClientRect1 = await scheduler.appointmentPopup.contentElement.boundingClientRect;
+
+  await scheduler.appointmentPopup.selectRepeatValue(t, 'Weekly');
+  const boundingClientRect2 = await scheduler.appointmentPopup.contentElement.boundingClientRect;
+
+  await t.click(scheduler.appointmentPopup.recurrence.backButton);
+  const boundingClientRect3 = await scheduler.appointmentPopup.contentElement.boundingClientRect;
+
+  await t
+    .expect(roughEqualClientBoundingRect(boundingClientRect1, boundingClientRect2)).ok()
+    .expect(roughEqualClientBoundingRect(boundingClientRect1, boundingClientRect3)).ok();
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 25),
+    editing: {
+      form: {
+        items: [
+          'mainGroup',
+          {
+            name: 'recurrenceGroup',
+            items: ['recurrenceStartDateGroup'],
+          },
+        ],
+      },
+    },
+  });
+});

packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts

@@ -897,8 +897,6 @@ export class AppointmentForm {
   }
 
   showMainGroup(): void {
-    this._popup.updateToolbarForMainGroup();
-
     const currentHeight = this.dxPopup.option('height') as string | number | undefined;
     const editingConfig = this.scheduler.getEditingConfig();
     const configuredHeight = editingConfig?.popup?.height ?? 'auto';
@@ -918,6 +916,8 @@ export class AppointmentForm {
       this._$recurrenceGroup.addClass(CLASSES.recurrenceHidden);
       this._$recurrenceGroup.attr('inert', true);
     }
+
+    this._popup.updateToolbarForMainGroup();
   }
 
   showRecurrenceGroup(): void {
@@ -926,8 +926,6 @@ export class AppointmentForm {
       repeatEditor.close();
     }
 
-    this._popup.updateToolbarForRecurrenceGroup();
-
     const currentHeight = this.dxPopup.option('height') as string | number | undefined;
 
     if (currentHeight === 'auto' || currentHeight === undefined) {
@@ -946,6 +944,8 @@ export class AppointmentForm {
 
       this.focusFirstFocusableInGroup(this._$recurrenceGroup);
     }
+
+    this._popup.updateToolbarForRecurrenceGroup();
   }
 
   saveRecurrenceValue(): void {

packages/testcafe-models/scheduler/index.ts

@@ -250,8 +250,8 @@ export default class Scheduler extends Widget {
 
   async openAppointmentPopup(
     t: TestController,
-    appointment: any,
-    isRecurringAppointment: boolean,
+    appointment?: any,
+    isRecurringAppointment?: boolean,
   ): Promise<AppointmentPopup> {
     const { getInstance } = this;