Scheduler - Fix appointment form state between popup openings

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/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

@@ -441,6 +441,20 @@ describe('Appointment Form', () => {
       expect(POM.popup.getInputValue('roomId')).toBe('');
     });
 
+    it('should create a new form instance on each popup opening', async () => {
+      const { scheduler, POM } = await createScheduler(getDefaultConfig());
+
+      scheduler.showAppointmentPopup(commonAppointment);
+      const firstFormInstance = POM.popup.dxForm;
+
+      POM.popup.cancelButton.click();
+
+      scheduler.showAppointmentPopup(commonAppointment);
+      const secondFormInstance = POM.popup.dxForm;
+
+      expect(secondFormInstance).not.toBe(firstFormInstance);
+    });
+
     it('should have correct repeat editor value when opening recurring appointment after common appointment', async () => {
       const { scheduler, POM } = await createScheduler(getDefaultConfig());
 

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 {