Scheduler — Popup keep resource state between openings (#32915)

Author: aleksei-semikozov

apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.ts

@@ -62,7 +62,6 @@ export class AppComponent {
     onInitialized: (e: DxPopupTypes.InitializedEvent) => { this.popup = e.component; },
     onHidden: () => {
       this.setConflictError(false);
-      this.form?.updateData('assigneeId', []);
     },
   };
 

apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx

@@ -157,7 +157,6 @@ const App = () => {
     },
     onHidden: () => {
       setConflictError(false);
-      formRef.current?.updateData('assigneeId', []);
     },
   }), [setConflictError]);
 

apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js

@@ -130,7 +130,6 @@ const App = () => {
       },
       onHidden: () => {
         setConflictError(false);
-        formRef.current?.updateData('assigneeId', []);
       },
     }),
     [setConflictError],

apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue

@@ -186,7 +186,6 @@ const popupOptions = {
   },
   onHidden: () => {
     setConflictError(false);
-    form?.updateData('assigneeId', []);
   },
 };
 

apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js

@@ -29,7 +29,6 @@ $(() => {
         },
         onHidden: () => {
           setConflictError(false);
-          form?.updateData('assigneeId', []);
         },
       },
       form: {

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

@@ -377,79 +377,18 @@ describe('Appointment Form', () => {
   });
 
   describe('State', () => {
-    it('should have empty description, subject and timezone inputs when opening second common appointment', async () => {
-      const { scheduler, POM } = await createScheduler({
-        ...getDefaultConfig(),
-        editing: {
-          allowUpdating: true,
-          allowTimeZoneEditing: true,
-        },
-      });
-
-      scheduler.showAppointmentPopup({ ...commonAppointment });
-
-      POM.popup.setInputValue('descriptionEditor', 'temp');
-      POM.popup.setInputValue('startDateTimeZoneEditor', 'America/Los_Angeles');
-      POM.popup.setInputValue('endDateTimeZoneEditor', 'America/Anchorage');
-      POM.popup.saveButton.click();
-
-      scheduler.showAppointmentPopup();
-
-      expect(POM.popup.getInputValue('subjectEditor')).toBe('');
-      expect(POM.popup.getInputValue('descriptionEditor')).toBe('');
-      expect(POM.popup.getInputValue('startDateTimeZoneEditor')).toBe('');
-      expect(POM.popup.getInputValue('endDateTimeZoneEditor')).toBe('');
-    });
-
-    it('should have correct form data when opening second appointment', async () => {
+    it('should create a new form instance on each popup opening', async () => {
       const { scheduler, POM } = await createScheduler(getDefaultConfig());
 
       scheduler.showAppointmentPopup(commonAppointment);
-
-      expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...commonAppointment });
+      const firstFormInstance = POM.popup.dxForm;
 
       POM.popup.cancelButton.click();
 
-      scheduler.showAppointmentPopup(allDayAppointment);
-
-      expect(POM.popup.dxForm.option('formData')).toMatchObject({ ...allDayAppointment });
-    });
-
-    it('should have empty resource editor value when opening second appointment', async () => {
-      const { scheduler, POM } = await createScheduler({
-        ...getDefaultConfig(),
-        resources: [{
-          fieldExpr: 'roomId',
-          dataSource: [
-            { text: 'Room 1', id: 1, color: '#00af2c' },
-            { text: 'Room 2', id: 2, color: '#56ca85' },
-            { text: 'Room 3', id: 3, color: '#8ecd3c' },
-          ],
-        }],
-      });
-
-      scheduler.showAppointmentPopup({
-        text: 'Resource test app',
-        startDate: new Date(2017, 4, 9, 9, 30),
-        endDate: new Date(2017, 4, 9, 11),
-        roomId: 1,
-      });
-      POM.popup.setInputValue('roomId', 2);
-      scheduler.hideAppointmentPopup(true);
-
-      scheduler.showAppointmentPopup();
-      expect(POM.popup.getInputValue('roomId')).toBe('');
-    });
-
-    it('should have correct repeat editor value when opening recurring appointment after common appointment', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup({ ...commonAppointment });
-      POM.popup.saveButton.click();
+      scheduler.showAppointmentPopup(commonAppointment);
+      const secondFormInstance = POM.popup.dxForm;
 
-      scheduler.showAppointmentPopup({ ...recurringAppointment });
-      POM.popup.editSeriesButton.click();
-      expect(POM.popup.getInputValue('repeatEditor')).toBe('Daily');
+      expect(secondFormInstance).not.toBe(firstFormInstance);
     });
 
     it('should have correct editor values when opening for empty date cell - 1', async () => {
@@ -939,36 +878,6 @@ describe('Appointment Form', () => {
       expect(POM.popup.getInputValue('endDateEditor')).toBe('5/1/2017');
       expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy();
     });
-
-    it('should show correct dates after switching off allDay and canceling changes (T832711)', async () => {
-      const { scheduler, POM } = await createScheduler(undefined);
-
-      scheduler.showAppointmentPopup(allDayAppointment);
-      POM.popup.getInput('allDayEditor').click();
-      POM.popup.cancelButton.click();
-
-      scheduler.showAppointmentPopup(allDayAppointment);
-
-      expect(POM.popup.getInputValue('startDateEditor')).toBe('5/1/2017');
-      expect(POM.popup.isInputVisible('startTimeEditor')).toBeFalsy();
-      expect(POM.popup.getInputValue('endDateEditor')).toBe('5/1/2017');
-      expect(POM.popup.isInputVisible('endTimeEditor')).toBeFalsy();
-    });
-
-    it('should show correct dates after switching on allDay and canceling changes (T832711)', async () => {
-      const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-      scheduler.showAppointmentPopup(commonAppointment);
-      POM.popup.getInput('allDayEditor').click();
-      POM.popup.cancelButton.click();
-
-      scheduler.showAppointmentPopup(commonAppointment);
-
-      expect(POM.popup.getInputValue('startDateEditor')).toBe('5/9/2017');
-      expect(POM.popup.getInputValue('startTimeEditor')).toBe('9:30 AM');
-      expect(POM.popup.getInputValue('endDateEditor')).toBe('5/9/2017');
-      expect(POM.popup.getInputValue('endTimeEditor')).toBe('11:00 AM');
-    });
   });
 
   describe('Timezone Editors', () => {
@@ -1527,45 +1436,6 @@ describe('Appointment Form', () => {
         expect(POM.popup.getInputValue('recurrenceRepeatEndEditor')).toBe('count');
         expect(POM.popup.getInputValue('recurrenceEndCountEditor')).toBe('10 occurrence(s)');
       });
-
-      it('should have correct input values when opening second weekly recurring appointment', async () => {
-        const { scheduler, POM } = await createScheduler(getDefaultConfig());
-
-        const appointment1 = {
-          text: 'Meeting',
-          startDate: new Date(2017, 4, 1, 10, 30),
-          endDate: new Date(2017, 4, 1, 11),
-          recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=MO,WE,FR;COUNT=5',
-          repeatEnd: 'count',
-        };
-        const appointment2 = {
-          text: 'Meeting',
-          startDate: new Date(2017, 4, 2, 10, 30),
-          endDate: new Date(2017, 4, 2, 11),
-          recurrenceRule: 'FREQ=WEEKLY;INTERVAL=1;BYDAY=TU,TH;COUNT=5',
-          repeatEnd: 'count',
-        };
-
-        scheduler.showAppointmentPopup(appointment1);
-        POM.popup.editSeriesButton.click();
-        POM.popup.recurrenceSettingsButton.click();
-
-        scheduler.hideAppointmentPopup();
-
-        scheduler.showAppointmentPopup(appointment2);
-        POM.popup.editSeriesButton.click();
-        POM.popup.recurrenceSettingsButton.click();
-
-        expect(POM.popup.getInputValue('repeatEditor')).toBe('Weekly');
-        expect(POM.popup.getInputValue('recurrenceStartDateEditor')).toBe('5/2/2017');
-        expect(POM.popup.getInputValue('recurrenceCountEditor')).toBe('1');
-        expect(POM.popup.getInputValue('recurrencePeriodEditor')).toBe('Week(s)');
-
-        const expectedWeekDaysSelection = [false, true, false, true, false, false, false];
-        expect(POM.popup.getWeekDaysSelection()).toEqual(expectedWeekDaysSelection);
-
-        expect(POM.popup.getInputValue('recurrenceEndCountEditor')).toBe('5 occurrence(s)');
-      });
     });
 
     describe('Repeat End Values Preservation', () => {

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

@@ -69,10 +69,10 @@ export class AppointmentPopup {
     this.state.allowSaving = config.allowSaving;
     this.state.excludeInfo = config.excludeInfo;
 
-    if (!this._popup) {
-      const popupConfig = this._createPopupConfig();
-      this._createPopup(popupConfig);
-    }
+    this._disposePopup();
+
+    const popupConfig = this._createPopupConfig();
+    this._createPopup(popupConfig);
 
     this._popup!.show();
   }
@@ -82,9 +82,17 @@ export class AppointmentPopup {
   }
 
   dispose() {
-    this.form.dispose();
-    this._popup?.dispose();
-    this._popup = undefined;
+    this._disposePopup();
+  }
+
+  private _disposePopup(): void {
+    if (this._popup) {
+      const $element = this._popup.$element();
+      this.form.dispose();
+      this._popup.dispose();
+      $element.remove();
+      this._popup = undefined;
+    }
   }
 
   _createPopup(options): void {