Appointment Form Redesign: Repeat editor has visual bug when allowUpdating is false (#31600)

Author: sjbur

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__main-form__readonly (generic.light).png

@@ -163,3 +163,43 @@ test.meta({ browserSize: [1500, 1500] })('main form with resources that have ico
   currentDate: new Date(2021, 2, 25),
   resources: getResources(true),
 }));
+
+test.meta({ browserSize: [1500, 1500] })('appointment form readonly state', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const appointment = {
+    text: 'Appointment',
+    startDate: new Date('2021-04-26T16:30:00.000Z'),
+    endDate: new Date('2021-04-26T18:30:00.000Z'),
+    allDay: false,
+    recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
+    assigneeId: [1, 2],
+    roomId: 1,
+    priorityId: 1,
+  };
+
+  const appointmentPopup = await openAppointmentPopup(t, appointment, false);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'scheduler__appointment__main-form__readonly.png',
+    { element: appointmentPopup.contentElement },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    views: ['week'],
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 25),
+    resources: getResources(),
+    editing: {
+      allowUpdating: false,
+      allowTimeZoneEditing: true,
+    },
+  });
+});

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__recurrence-form__readonly (generic.light).png

@@ -745,3 +745,47 @@ test.clientScripts([
     (window as any).MockDate.reset();
   })();
 });
+
+test.clientScripts([
+  { module: 'mockdate' },
+  { content: 'window.MockDate = MockDate;' },
+])('recurrence form readonly state', async (t) => {
+  await ClientFunction(() => {
+    (window as any).MockDate.set('2025/10/29');
+  })();
+
+  const appointment = {
+    text: 'Readonly Recurrent Appointment',
+    startDate: new Date('2024-01-01T10:00:00'),
+    endDate: new Date('2024-01-01T11:00:00'),
+    recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,WE,FR;COUNT=10',
+  };
+
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const appointmentPopup = await openAppointmentPopup(t, appointment, false);
+  await appointmentPopup.openRecurrenceSettings(t);
+
+  await testScreenshot(
+    t,
+    takeScreenshot,
+    'scheduler__recurrence-form__readonly.png',
+    { element: appointmentPopup.recurrence.group },
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxScheduler', {
+  dataSource: [],
+  views: ['week'],
+  currentView: 'week',
+  currentDate: new Date(2024, 0, 1),
+  editing: {
+    allowUpdating: false,
+  },
+})).after(async () => {
+  await ClientFunction(() => {
+    (window as any).MockDate.reset();
+  })();
+});

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

@@ -646,6 +646,14 @@ $scheduler-appointment-form-label-padding: 20px;
         }
       }
 
+      .dx-scheduler-form-repeat-editor .dx-selectbox.dx-state-readonly .dx-scheduler-form-recurrence-settings-button {
+        margin-right: 0;
+
+        &::after {
+          content: none;
+        }
+      }
+
       /* Recurrence Day Buttons */
       .dx-scheduler-days-of-week-buttons {
         display: flex;

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

@@ -440,6 +440,29 @@ describe('Appointment Popup Form', () => {
   });
 
   describe('Recurrence', () => {
+    it('should allow opening recurrence settings when allowUpdating is false', async () => {
+      const appointment = {
+        text: 'Recurrent Appointment',
+        startDate: new Date(2017, 4, 1, 9, 30),
+        endDate: new Date(2017, 4, 1, 11),
+        recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,WE,FR;COUNT=10',
+      };
+
+      const { POM, scheduler } = await createScheduler({
+        ...getDefaultConfig(),
+        editing: { allowUpdating: false },
+      });
+
+      scheduler.showAppointmentPopup(appointment);
+
+      const recurrenceGroup = $(POM.popup.recurrenceGroup);
+      expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(true);
+
+      POM.popup.openRecurrenceSettings();
+
+      expect(recurrenceGroup.hasClass(CLASSES.recurrenceGroupHidden)).toBe(false);
+    });
+
     it('changes visibility of groups when opening recurrence form', async () => {
       const { scheduler, POM } = await createScheduler(getDefaultConfig());
 

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

@@ -914,6 +914,7 @@ export class AppointmentForm {
         location: 'after',
         name: 'settings',
         options: {
+          disabled: false,
           icon: 'optionsoutline',
           stylingMode: 'text',
           onClick: (): void => {

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

@@ -102,6 +102,8 @@ export class RecurrenceForm {
 
   private _weekDayButtons: Record<string, dxButton> = {};
 
+  private _readOnly = false;
+
   constructor(scheduler: Scheduler) {
     this.scheduler = scheduler;
     this.weekDayItems = this.createWeekDayItems();
@@ -161,9 +163,7 @@ export class RecurrenceForm {
   }
 
   setReadOnly(value: boolean): void {
-    Object.values(this._weekDayButtons).forEach((button) => {
-      button?.option('disabled', value);
-    });
+    this._readOnly = value;
   }
 
   get recurrenceRule(): RecurrenceRule {
@@ -333,6 +333,7 @@ export class RecurrenceForm {
 
           this._weekDayButtons[item.key] = this.scheduler.createComponent(buttonContainer, Button, {
             text: item.text,
+            disabled: this._readOnly,
             onClick: (): void => {
               const isSelected = this.recurrenceRule.byDay.includes(item.key);