Scheduler - Form - Fix scrollbar when opening recurrence group (#31531)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__with-icons (theme=generic.light).png

@@ -469,28 +469,33 @@ $scheduler-appointment-form-label-padding: 20px;
     }
 
     .dx-form {
+      min-height: 100%;
       position: relative;
       overflow: hidden;
 
       .dx-scheduler-form-main-group {
+        width: 100%;
         transition: transform 0.3s ease-in-out;
         transform: translateX(0);
+        position: relative;
 
-        &.dx-scheduler-form-main-hidden {
+        &.dx-scheduler-form-main-group-hidden {
           transform: translateX(-100%);
+          position: absolute;
+          top: 0;
         }
       }
 
       .dx-scheduler-form-recurrence-group {
-        position: absolute;
-        top: 0;
-        left: 0;
         width: 100%;
         transition: transform 0.3s ease-in-out;
-        transform: translateX(100%);
+        transform: translateX(0);
+        position: relative;
 
-        &:not(.dx-scheduler-form-recurrence-hidden) {
-          transform: translateX(0);
+        &.dx-scheduler-form-recurrence-group-hidden {
+          transform: translateX(100%);
+          position: absolute;
+          top: 0;
         }
       }
 

packages/devextreme-scss/scss/widgets/base/scheduler/_index.scss

@@ -12,6 +12,9 @@ import { setupSchedulerTestEnvironment } from '../__tests__/__mock__/m_mock_sche
 const CLASSES = {
   icon: 'dx-scheduler-form-icon',
   hidden: 'dx-hidden',
+
+  mainGroupHidden: 'dx-scheduler-form-main-group-hidden',
+  recurrenceGroupHidden: 'dx-scheduler-form-recurrence-group-hidden',
 };
 
 const getDefaultData = () => [
@@ -436,24 +439,32 @@ describe('Appointment Popup Form', () => {
   });
 
   describe('Recurrence', () => {
-    it('Recurrence editor container should be visible after changing its visibility value', async () => {
-      const appointment = {
-        text: 'Test Appointment',
-        startDate: new Date(2017, 4, 1, 9, 30),
-        endDate: new Date(2017, 4, 1, 11),
-      };
-
-      const { POM, scheduler } = await createScheduler(getDefaultConfig());
+    it('changes visibility of groups when opening recurrence form', async () => {
+      const { scheduler, POM } = await createScheduler(getDefaultConfig());
 
-      scheduler.showAppointmentPopup(appointment);
+      scheduler.showAppointmentPopup();
 
+      const mainGroup = $(POM.popup.mainGroup);
       const recurrenceGroup = $(POM.popup.recurrenceGroup);
 
-      expect(recurrenceGroup.hasClass('dx-scheduler-form-recurrence-hidden')).toBe(true);
+      expect(mainGroup.hasClass(CLASSES.mainGroupHidden)).toBe(false);
+      expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(true);
 
       POM.popup.selectRepeatValue('weekly');
+      await new Promise(process.nextTick);
+
+      const popupHeight = POM.popup.component.option('height');
+      expect(popupHeight).toBeDefined();
+      expect(typeof popupHeight).toBe('number');
+
+      expect(mainGroup.hasClass(CLASSES.mainGroupHidden)).toBe(true);
+      expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(false);
+
+      POM.popup.getBackButton().click();
 
-      expect(recurrenceGroup.hasClass('dx-scheduler-form-recurrence-hidden')).toBe(false);
+      expect(POM.popup.component.option('height')).toBeUndefined();
+      expect(mainGroup.hasClass(CLASSES.mainGroupHidden)).toBe(false);
+      expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(true);
     });
 
     it('Check that after opening recurrence appointment current form is main form', async () => {
@@ -472,7 +483,7 @@ describe('Appointment Popup Form', () => {
 
       const recurrenceGroup = $(POM.popup.recurrenceGroup);
 
-      expect(recurrenceGroup.hasClass('dx-scheduler-form-recurrence-hidden')).toBe(true);
+      expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(true);
     });
 
     it('Should discard recurrence changes when clicking \'cancel\' button in recurrence form', async () => {

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

@@ -1,6 +1,7 @@
 import type { TextEditorButton } from '@js/common';
 import messageLocalization from '@js/common/core/localization/message';
 import { DataSource } from '@js/common/data';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import dateUtils from '@js/core/utils/date';
 import { extend } from '@js/core/utils/extend';
@@ -10,12 +11,13 @@ import type {
   GroupItem, Item as FormItem, Properties as FormProperties, SimpleItem,
 } from '@js/ui/form';
 import dxForm from '@js/ui/form';
-import type { Properties as SchedulerProperties } from '@js/ui/scheduler';
+import type { AppointmentFormIconsShowMode, Properties as SchedulerProperties } from '@js/ui/scheduler';
 import type { Properties as SelectBoxProperties } from '@js/ui/select_box';
 import type { Properties as SwitchProperties } from '@js/ui/switch';
 import type { Properties as TextAreaProperties } from '@js/ui/text_area';
 import { current, isFluent } from '@js/ui/themes';
 import { dateSerialization } from '@ts/core/utils/m_date_serialization';
+import type Popup from '@ts/ui/popup/m_popup';
 
 import timeZoneUtils from '../m_utils_time_zone';
 import type { SafeAppointment } from '../types';
@@ -59,9 +61,9 @@ const CLASSES = {
   descriptionEditor: 'dx-scheduler-form-description-editor',
 
   recurrenceSettingsButton: 'dx-scheduler-form-recurrence-settings-button',
-  mainHidden: 'dx-scheduler-form-main-hidden',
+  mainHidden: 'dx-scheduler-form-main-group-hidden',
   recurrenceGroup: 'dx-scheduler-form-recurrence-group',
-  recurrenceHidden: 'dx-scheduler-form-recurrence-hidden',
+  recurrenceHidden: 'dx-scheduler-form-recurrence-group-hidden',
 };
 
 const EDITOR_NAMES = {
@@ -120,10 +122,18 @@ export class AppointmentForm {
 
   private _popup!: any;
 
+  private _$mainGroup?: dxElementWrapper;
+
+  private _$recurrenceGroup?: dxElementWrapper;
+
   get dxForm(): dxForm {
     return this._dxForm as dxForm;
   }
 
+  private get dxPopup(): Popup {
+    return this._popup.dxPopup as Popup;
+  }
+
   get readOnly(): boolean {
     return this.dxForm.option('readOnly') as boolean;
   }
@@ -195,7 +205,7 @@ export class AppointmentForm {
     this.createForm(items);
   }
 
-  private getIconsShowMode(): 'main' | 'recurrence' | 'both' | 'none' {
+  private getIconsShowMode(): AppointmentFormIconsShowMode {
     const editingConfig = this.scheduler.getEditingConfig() as SchedulerProperties['editing'];
 
     if (isBoolean(editingConfig)) {
@@ -257,6 +267,11 @@ export class AppointmentForm {
         this._dxForm = e.component;
         this._recurrenceForm.dxForm = this.dxForm;
       },
+      onContentReady: (e): void => {
+        const $formElement = e.component.$element();
+        this._$mainGroup = $formElement.find(`.${CLASSES.mainGroup}`);
+        this._$recurrenceGroup = $formElement.find(`.${CLASSES.recurrenceGroup}`);
+      },
     } as FormProperties) as dxForm;
   }
 
@@ -751,12 +766,11 @@ export class AppointmentForm {
   }
 
   showRecurrenceGroup(): void {
-    const $formElement = $(this.dxForm.element());
-    const mainGroup = $formElement.find(`.${CLASSES.mainGroup}`);
-    const recurrenceGroup = $formElement.find(`.${CLASSES.recurrenceGroup}`);
+    const overlayHeight = this.dxPopup.$overlayContent().get(0).clientHeight;
+    this.dxPopup.option('height', overlayHeight);
 
-    mainGroup.addClass(CLASSES.mainHidden);
-    recurrenceGroup.removeClass(CLASSES.recurrenceHidden);
+    this._$mainGroup?.addClass(CLASSES.mainHidden);
+    this._$recurrenceGroup?.removeClass(CLASSES.recurrenceHidden);
 
     const repeatEditorValue = this.dxForm.getEditor(EDITOR_NAMES.repeat)?.option('value');
 
@@ -770,12 +784,10 @@ export class AppointmentForm {
   }
 
   showMainGroup(saveRecurrenceValue = true): void {
-    const $formElement = $(this.dxForm.element());
-    const mainGroup = $formElement.find(`.${CLASSES.mainGroup}`);
-    const recurrenceGroup = $formElement.find(`.${CLASSES.recurrenceGroup}`);
+    this.dxPopup.option('height', undefined);
 
-    mainGroup.removeClass(CLASSES.mainHidden);
-    recurrenceGroup.addClass(CLASSES.recurrenceHidden);
+    this._$mainGroup?.removeClass(CLASSES.mainHidden);
+    this._$recurrenceGroup?.addClass(CLASSES.recurrenceHidden);
 
     this._popup.updateToolbarForMainGroup();
 

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

@@ -106,6 +106,7 @@ export class AppointmentPopup {
       },
       contentTemplate: (): dxElementWrapper => {
         this.form.create({
+          dxPopup: this.popup,
           updateToolbarForMainGroup: (): void => this.updateToolbarForMainGroup(),
           updateToolbarForRecurrenceGroup: (): void => this.updateToolbarForRecurrenceGroup(),
         });

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

@@ -20,7 +20,7 @@ const CLASSES = {
   formIcon: 'dx-scheduler-form-icon',
 
   recurrenceGroup: 'dx-scheduler-form-recurrence-group',
-  recurrenceHidden: 'dx-scheduler-form-recurrence-hidden',
+  recurrenceHidden: 'dx-scheduler-form-recurrence-group-hidden',
 
   frequencyEditor: 'dx-scheduler-form-recurrence-frequency-editor',
   byMonthEditor: 'dx-scheduler-form-recurrence-by-month-editor',