Scheduler New Form — Fix slide animation overlapping items outside mainGroup

Author: aleksei-semikozov

apps/react-storybook/stories/scheduler/SchedulerFormCustomization.stories.tsx

@@ -383,6 +383,40 @@ export const ResourcesColumnLayout: Story = {
   },
 };
 
+export const CustomItemBeforeMainGroup: Story = {
+  args: {
+    ...baseConfig,
+    resources,
+  },
+  argTypes: iconsShowModeArgType,
+  render: (args) => {
+    return (
+      <Scheduler
+        {...baseConfig}
+        resources={resources}
+        editing={{
+          form: {
+            items: [
+              {
+                name: "customNotice",
+                template: () => {
+                  const element = document.createElement("div");
+                  element.className = "custom-form-notice";
+                  element.textContent = "This is a custom element placed before mainGroup. The slide animation should not overlap this area.";
+                  return element;
+                },
+              },
+              "mainGroup",
+              "recurrenceGroup",
+            ],
+            iconsShowMode: args["editing.form.iconsShowMode"],
+          },
+        } as Properties["editing"]}
+      />
+    );
+  },
+};
+
 export const RTL: Story = {
   args: {
     ...baseConfig,

apps/react-storybook/stories/scheduler/form-customization.css

@@ -9,3 +9,13 @@
 .scheduler-form-custom-icon-button * {
   padding: 0 !important;
 }
+
+.custom-form-notice {
+  background: #fce4e4;
+  border: 1px solid #e0a0a0;
+  border-radius: 4px;
+  padding: 8px 12px;
+  color: #8b3a3a;
+  font-size: 13px;
+  line-height: 1.4;
+}

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

@@ -484,7 +484,7 @@ $scheduler-appointment-form-label-padding: 20px;
         &.dx-scheduler-form-main-group-hidden {
           transform: translateX(-110%);
           position: absolute;
-          top: 0;
+          top: var(--dx-scheduler-animation-top, 0);
         }
       }
 
@@ -497,7 +497,7 @@ $scheduler-appointment-form-label-padding: 20px;
         &.dx-scheduler-form-recurrence-group-hidden {
           transform: translateX(110%);
           position: absolute;
-          top: 0;
+          top: var(--dx-scheduler-animation-top, 0);
         }
       }
 

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

@@ -58,6 +58,18 @@ export const setupSchedulerTestEnvironment = ({
           y: 0,
           toJSON: (): void => {},
         };
+      case classList.includes('dx-scheduler-form-main-group'):
+        return {
+          width: 0,
+          height: 0,
+          top: 50,
+          left: 0,
+          bottom: 50,
+          right: 0,
+          x: 0,
+          y: 50,
+          toJSON: (): void => {},
+        };
       default:
         return {
           width: 0,

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

@@ -1572,6 +1572,18 @@ describe('Appointment Form', () => {
         expect(document.activeElement).toBe(frequencyEditorInputElement);
       });
     });
+
+    it('should set animation offset CSS variable when switching to recurrence form', async () => {
+      const { scheduler, POM } = await createScheduler(getDefaultConfig());
+
+      scheduler.showAppointmentPopup();
+
+      POM.popup.selectRepeatValue('weekly');
+
+      const formElement = POM.popup.dxForm.$element()[0];
+      const animationTop = formElement.style.getPropertyValue('--dx-scheduler-animation-top');
+      expect(animationTop).toBe('50px');
+    });
   });
 
   describe('firstDayOfWeek', () => {

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

@@ -921,6 +921,7 @@ export class AppointmentForm {
 
   showRecurrenceGroup(): void {
     this._popup.updateToolbarForRecurrenceGroup();
+    this.updateAnimationOffset();
 
     const currentHeight = this.dxPopup.option('height') as string | number | undefined;
 
@@ -1059,6 +1060,22 @@ export class AppointmentForm {
     this.dxForm.endUpdate();
   }
 
+  private updateAnimationOffset(): void {
+    if (!this._$mainGroup) {
+      return;
+    }
+
+    const formElement = this.dxForm.$element()[0];
+    const mainGroupElement = this._$mainGroup[0];
+
+    if (formElement && mainGroupElement) {
+      const formRect = formElement.getBoundingClientRect();
+      const groupRect = mainGroupElement.getBoundingClientRect();
+      const topOffset = groupRect.top - formRect.top;
+      formElement.style.setProperty('--dx-scheduler-animation-top', `${topOffset}px`);
+    }
+  }
+
   private focusFirstFocusableInGroup($group: dxElementWrapper): void {
     const focusTarget = $group.find(`.${CLASSES.fieldItemContent} [tabindex]`).first().get(0) as HTMLElement;
     focusTarget?.focus({ preventScroll: true });