fix: fix bug when opening appointment with predefined recurrent rule

Author: sjbur

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

@@ -348,6 +348,12 @@ export const LegacyPopup: Story = {
       <ReactScheduler
         ref={schedulerRef}
         {...baseConfig}
+        onAppointmentUpdating={(e) => {
+          delete e.newData.repeat;
+        }}
+        onAppointmentAdding={(e) => {
+          delete e.appointmentData.repeat;
+        }}
         editing={{
           popup: {
             maxWidth: 800,
@@ -382,6 +388,12 @@ export const LegacyPopup: Story = {
           form: {
             onContentReady: function (e) {
               form = e.component;
+
+              form.on('fieldDataChanged', (e) => {
+                if (e.dataField === 'recurrenceRule') {
+                  form?.option('formData.repeat', !!e.value)
+                }
+              });
             },
             iconsShowMode: "both",
             items: [
@@ -401,23 +413,16 @@ export const LegacyPopup: Story = {
                         dataField: "repeat",
                         editorOptions: {
                           onValueChanged: (e) => {
-                            if (e.value === true) {
-                              form?.option("colCount", 2);
-
+                            if (e.value) {
                               const recurrenceRule = form?.option('formData')?.recurrenceRule;
 
-                              form?.option('formData', {
-                                ...form.option('formData'),
-                                recurrenceRule:  recurrenceRule || "FREQ=DAILY"
-                              })
-                              form?.itemOption("recurrenceGroup", "cssClass", "");
+                              form?.option("colCount", 2);
+                              form?.option('formData.recurrenceRule', recurrenceRule || "FREQ=DAILY");
+                              form?.itemOption("recurrenceGroup", "visible", true);
                             } else {
                               form?.option("colCount", 1);
-                              form?.option('formData', {
-                                ...form.option('formData'),
-                                recurrenceRule: ""
-                              })
-                              form?.itemOption("recurrenceGroup", "cssClass", "dx-hidden");
+                              form?.option('formData.recurrenceRule', "");
+                              form?.itemOption("recurrenceGroup", "visible", false);
                             }
                           },
                         },
@@ -431,6 +436,8 @@ export const LegacyPopup: Story = {
               {
                 name: "recurrenceGroup",
                 itemType: "group",
+                cssClass: "",
+                visible: false,
                 items: [
                   "recurrenceRuleGroup",
                   "recurrenceEndGroup",

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

@@ -179,7 +179,6 @@ export class RecurrenceForm {
 
   setReadOnly(value: boolean): void {
     this._readOnly = value;
-    // this.updateWeekDaysButtons();
   }
 
   createRecurrenceFormGroup(): GroupItem {
@@ -368,8 +367,11 @@ export class RecurrenceForm {
                 this.recurrenceRule.byDay.push(item.key);
               }
 
-              // todo: update state only of the current button and remove this.updateWeekDaysButtons
-              this.updateWeekDaysButtons();
+              const button = this._weekDayButtons[item.key];
+              const newIsSelected = this.recurrenceRule.byDay.includes(item.key);
+
+              button.option('stylingMode', newIsSelected ? 'contained' : 'outlined');
+              button.option('type', newIsSelected ? 'default' : 'normal');
             },
           });
         });
@@ -626,14 +628,4 @@ export class RecurrenceForm {
 
     this.dxForm.endUpdate();
   }
-
-  private updateWeekDaysButtons(): void {
-    Object.entries(this._weekDayButtons).forEach(([dayKey, button]) => {
-      const isSelected = this.recurrenceRule.byDay.includes(dayKey);
-
-      button.option('stylingMode', isSelected ? 'contained' : 'outlined');
-      button.option('type', isSelected ? 'default' : 'normal');
-      // button.option('disabled', this._readOnly);
-    });
-  }
 }