diff --git a/app/components/work_packages/date_picker/dialog_content_component.html.erb b/app/components/work_packages/date_picker/dialog_content_component.html.erb
index c51e928236ba..c28ea5d2b1ed 100644
--- a/app/components/work_packages/date_picker/dialog_content_component.html.erb
+++ b/app/components/work_packages/date_picker/dialog_content_component.html.erb
@@ -1,6 +1,7 @@
 <%=
   content_tag("turbo-frame", id: "wp-datepicker-dialog--content") do
-    component_wrapper do
+    component_wrapper(data: { "application-target": "dynamic",
+                              controller: "work-packages--date-picker--preview" }) do
       component_collection do |collection|
         if show_banner?
           collection.with_component(WorkPackages::DatePicker::BannerComponent.new(work_package:, manually_scheduled:))
@@ -12,9 +13,7 @@
           url: work_package_datepicker_dialog_content_path,
           method: :put,
           id: DIALOG_FORM_ID,
-          data: { "application-target": "dynamic",
-                  "work-packages--date-picker--preview-target": "form",
-                  controller: "work-packages--date-picker--preview" },
+          data: { "work-packages--date-picker--preview-target": "form" },
           html: { autocomplete: "off" },
           ) do |f|
             flex_layout do |body|
@@ -90,7 +89,7 @@
 
         collection.with_component(Primer::Alpha::Dialog::Footer.new) do
           component_collection do |footer|
-            footer.with_component(Primer::ButtonComponent.new) do
+            footer.with_component(Primer::ButtonComponent.new(data: { action: "work-packages--date-picker--preview#cancel" })) do
               I18n.t("button_cancel")
             end
 
diff --git a/frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html b/frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html
index 66578feafcae..bffb2f1a6494 100644
--- a/frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html
+++ b/frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html
@@ -27,7 +27,8 @@
                  [change]="change"
                  [resource]="resource"
                  (successfulCreate)="handleSuccessfulCreate($event)"
-                 (successfulUpdate)="handleSuccessfulUpdate()"
+                 (successfulCreate)="handleSuccessfulCreate($event)"
+                 (cancel)="onModalClosed()"
                  id="wp-datepicker-dialog--content">
       <op-content-loader viewBox="0 0 100 100">
         <svg:rect x="5" y="5" width="70" height="5" rx="1"/>
diff --git a/frontend/src/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.html b/frontend/src/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.html
index 3807e504d4bc..d3e433c89e15 100644
--- a/frontend/src/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.html
+++ b/frontend/src/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.html
@@ -44,6 +44,7 @@
         [resource]="resource"
         (successfulCreate)="handleSuccessfulCreate($event)"
         (successfulUpdate)="handleSuccessfulUpdate()"
+        (cancel)="cancel()"
       >
         <op-content-loader
           viewBox="0 0 180 80"
diff --git a/frontend/src/app/shared/components/fields/edit/modal-with-turbo-content/modal-with-turbo-content.directive.ts b/frontend/src/app/shared/components/fields/edit/modal-with-turbo-content/modal-with-turbo-content.directive.ts
index 428df0850923..d26149db72c0 100644
--- a/frontend/src/app/shared/components/fields/edit/modal-with-turbo-content/modal-with-turbo-content.directive.ts
+++ b/frontend/src/app/shared/components/fields/edit/modal-with-turbo-content/modal-with-turbo-content.directive.ts
@@ -53,6 +53,7 @@ export class ModalWithTurboContentDirective implements AfterViewInit, OnDestroy
 
   @Output() successfulCreate= new EventEmitter<unknown>();
   @Output() successfulUpdate= new EventEmitter();
+  @Output() cancel= new EventEmitter();
 
   constructor(
     readonly elementRef:ElementRef,
@@ -70,6 +71,9 @@ export class ModalWithTurboContentDirective implements AfterViewInit, OnDestroy
       .elementRef
       .nativeElement
       .addEventListener('turbo:submit-end', this.contextBasedListener.bind(this));
+
+    document
+      .addEventListener('cancelModalWithTurboContent', this.cancelListener.bind(this));
   }
 
   ngOnDestroy() {
@@ -77,6 +81,10 @@ export class ModalWithTurboContentDirective implements AfterViewInit, OnDestroy
       .elementRef
       .nativeElement
       .removeEventListener('turbo:submit-end', this.contextBasedListener.bind(this));
+
+
+    document
+      .removeEventListener('cancelModalWithTurboContent', this.cancelListener.bind(this));
   }
 
   private contextBasedListener(event:CustomEvent) {
@@ -88,6 +96,10 @@ export class ModalWithTurboContentDirective implements AfterViewInit, OnDestroy
     }
   }
 
+  private cancelListener():void {
+    this.cancel.emit();
+  }
+
   private async propagateSuccessfulCreate(event:CustomEvent) {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const { fetchResponse } = event.detail;
diff --git a/frontend/src/stimulus/controllers/dynamic/work-packages/dialog/preview.controller.ts b/frontend/src/stimulus/controllers/dynamic/work-packages/dialog/preview.controller.ts
index 14d680e20c50..98ad19a332d8 100644
--- a/frontend/src/stimulus/controllers/dynamic/work-packages/dialog/preview.controller.ts
+++ b/frontend/src/stimulus/controllers/dynamic/work-packages/dialog/preview.controller.ts
@@ -116,6 +116,10 @@ export abstract class DialogPreviewController extends Controller {
     }
   }
 
+  protected cancel():void {
+    document.dispatchEvent(new CustomEvent('cancelModalWithTurboContent'));
+  }
+
   markFieldAsTouched(event:{ target:HTMLInputElement }) {
     this.targetFieldName = event.target.name.replace(/^work_package\[([^\]]+)\]$/, '$1');
     this.markTouched(this.targetFieldName);