Optimizing the life cycle dialog

app/forms/projects/life_cycles/form.rb

@@ -53,7 +53,7 @@ def base_input_attributes
         label: "#{icon} #{text}".html_safe, # rubocop:disable Rails/OutputSafety
         leading_visual: { icon: :calendar },
         datepicker_options: {
-          inDialog: true,
+          inDialog: ProjectLifeCycles::Sections::EditDialogComponent::DIALOG_ID,
           data: { action: "change->overview--project-life-cycles-form#handleChange" }
         },
         wrapper_data_attributes: {

frontend/src/app/shared/components/datepicker/basic-range-date-picker/basic-range-date-picker.component.html

@@ -16,6 +16,7 @@
   [ngModel]="stringValue"
   (ngModelChange)="changeValueFromInputDebounced($event)"
   (focus)="showDatePicker()"
+  (click)="sentCalendarToTopLayer()"
 />
 <ng-container *ngIf="mobile">
   <input

frontend/src/app/shared/components/datepicker/basic-range-date-picker/basic-range-date-picker.component.ts

@@ -115,7 +115,7 @@ export class OpBasicRangeDatePickerComponent implements OnInit, ControlValueAcce
 
   @Input() inputClassNames = '';
 
-  @Input() inDialog = false;
+  @Input() inDialog:string;
 
   @Input() dataAction = '';
 
@@ -170,7 +170,10 @@ export class OpBasicRangeDatePickerComponent implements OnInit, ControlValueAcce
   }
 
   showDatePicker():void {
-    this.datePickerInstance?.show();
+    if (!this.datePickerInstance?.isOpen) {
+      this.datePickerInstance?.show();
+      this.sentCalendarToTopLayer();
+    }
   }
 
   private initializeDatePicker() {
@@ -195,6 +198,9 @@ export class OpBasicRangeDatePickerComponent implements OnInit, ControlValueAcce
 
           this.cdRef.detectChanges();
         },
+        onOpen: () => {
+          this.sentCalendarToTopLayer();
+        },
         onDayCreate: async (dObj:Date[], dStr:string, fp:flatpickr.Instance, dayElem:DayElement) => {
           onDayCreate(
             dayElem,
@@ -203,7 +209,8 @@ export class OpBasicRangeDatePickerComponent implements OnInit, ControlValueAcce
             !!this.minimalDate && dayElem.dateObj <= this.minimalDate,
           );
         },
-        static: this.inDialog,
+        static: false,
+        appendTo: this.appendToBodyOrDialog(),
       },
       this.input.nativeElement as HTMLInputElement,
     );
@@ -234,4 +241,31 @@ export class OpBasicRangeDatePickerComponent implements OnInit, ControlValueAcce
   private resolveDateArrayToString(dates:string[]):string {
     return dates.join(` ${rangeSeparator} `);
   }
+
+  // In case the date picker is opened in a dialog, it needs to be in the top layer
+  // since the dialog is also there. This method is called in two cases:
+  // 1. When the date picker is opened
+  // 2. When the date picker is already opened and the user clicks on the input
+  // The later is necessary as otherwise the date picker would be removed from the top layer
+  // when the user clicks on the input. That is because the input is not part of the date picker
+  // so clicking on it would be considered a click on the backdrop which removes an item from
+  // the top layer again.
+  public sentCalendarToTopLayer() {
+    if (!this.datePickerInstance.isOpen || !this.inDialog) {
+      return;
+    }
+
+    const calendarContainer = this.datePickerInstance.datepickerInstance.calendarContainer;
+    calendarContainer.setAttribute('popover', '');
+    calendarContainer.showPopover();
+    calendarContainer.style.marginTop = '0';
+  }
+
+  private appendToBodyOrDialog():HTMLElement|undefined {
+    if (this.inDialog) {
+      return document.querySelector(`#${this.inDialog}`) as HTMLElement;
+    }
+
+    return undefined;
+  }
 }

frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.html

@@ -16,6 +16,7 @@
   [disabled]="disabled"
   (input)="changeValueFromInput($event.target.value)"
   (focus)="showDatePicker()"
+  (click)="sentCalendarToTopLayer()"
   [attr.data-remote-field-key]="remoteFieldKey"
 />
 

frontend/src/app/shared/components/datepicker/basic-single-date-picker/basic-single-date-picker.component.ts

@@ -95,7 +95,7 @@ export class OpBasicSingleDatePickerComponent implements ControlValueAccessor, O
 
   @Input() remoteFieldKey = null;
 
-  @Input() inDialog = false;
+  @Input() inDialog:string;
 
   @Input() dataAction = '';
 
@@ -146,7 +146,10 @@ export class OpBasicSingleDatePickerComponent implements ControlValueAccessor, O
   }
 
   showDatePicker():void {
-    this.datePickerInstance?.show();
+    if (!this.datePickerInstance?.isOpen) {
+      this.datePickerInstance?.show();
+      this.sentCalendarToTopLayer();
+    }
   }
 
   private initializeDatePicker() {
@@ -174,6 +177,9 @@ export class OpBasicSingleDatePickerComponent implements ControlValueAccessor, O
 
           this.cdRef.detectChanges();
         },
+        onOpen: () => {
+          this.sentCalendarToTopLayer();
+        },
         onDayCreate: async (_dObj:Date[], _dStr:string, _fp:flatpickr.Instance, dayElem:DayElement) => {
           onDayCreate(
             dayElem,
@@ -182,7 +188,8 @@ export class OpBasicSingleDatePickerComponent implements ControlValueAccessor, O
             !!this.minimalDate && dayElem.dateObj <= this.minimalDate,
           );
         },
-        static: this.inDialog,
+        static: false,
+        appendTo: this.appendToBodyOrDialog(),
       },
       this.input.nativeElement as HTMLInputElement,
     );
@@ -204,4 +211,31 @@ export class OpBasicSingleDatePickerComponent implements ControlValueAccessor, O
   registerOnTouched(fn:(_:string) => void):void {
     this.onTouched = fn;
   }
+
+  // In case the date picker is opened in a dialog, it needs to be in the top layer
+  // since the dialog is also there. This method is called in two cases:
+  // 1. When the date picker is opened
+  // 2. When the date picker is already opened and the user clicks on the input
+  // The later is necessary as otherwise the date picker would be removed from the top layer
+  // when the user clicks on the input. That is because the input is not part of the date picker
+  // so clicking on it would be considered a click on the backdrop which removes an item from
+  // the top layer again.
+  public sentCalendarToTopLayer() {
+    if (!this.datePickerInstance.isOpen || !this.inDialog) {
+      return;
+    }
+
+    const calendarContainer = this.datePickerInstance.datepickerInstance.calendarContainer;
+    calendarContainer.setAttribute('popover', '');
+    calendarContainer.showPopover();
+    calendarContainer.style.marginTop = '0';
+  }
+
+  private appendToBodyOrDialog():HTMLElement|undefined {
+    if (this.inDialog) {
+      return document.querySelector(`#${this.inDialog}`) as HTMLElement;
+    }
+
+    return undefined;
+  }
 }

modules/overviews/app/components/project_life_cycles/sections/edit_dialog_component.html.erb

@@ -1,16 +1,16 @@
 <%=
   render(Primer::Alpha::Dialog.new(title: t("label_life_cycle_step_plural"),
-                                   size: :large,
-                                   id: dialog_id)) do |d|
+                                   size: :medium_portrait,
+                                   id: DIALOG_ID)) do |d|
     d.with_header(variant: :large)
-    d.with_body(classes: "Overlay-body_autocomplete_height") do
+    d.with_body do
       render(::ProjectLifeCycles::Sections::EditComponent.new(model))
     end
     d.with_footer do
       component_collection do |footer_collection|
         footer_collection.with_component(Primer::ButtonComponent.new(
           data: {
-            "close-dialog-id": dialog_id
+            "close-dialog-id": DIALOG_ID
           }
         )) do
           t("button_cancel")

modules/overviews/app/components/project_life_cycles/sections/edit_dialog_component.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 #-- copyright
 # OpenProject is an open source project management software.
 # Copyright (C) the OpenProject GmbH
@@ -33,9 +35,7 @@ class EditDialogComponent < ApplicationComponent
       include OpTurbo::Streamable
       include OpPrimer::ComponentHelpers
 
-      def dialog_id
-        "edit-project-life-cycles-dialog"
-      end
+      DIALOG_ID = "edit-project-life-cycles-dialog"
     end
   end
 end

spec/support/components/projects/project_life_cycles/edit_dialog.rb

@@ -50,10 +50,12 @@ def within_async_content(close_after_yield: false, &)
         end
 
         def set_date_for(step, value:)
+          dialog_selector = "##{::ProjectLifeCycles::Sections::EditDialogComponent::DIALOG_ID}"
+
           datepicker = if value.is_a?(Array)
-                         Components::RangeDatepicker.new
+                         Components::RangeDatepicker.new(dialog_selector)
                        else
-                         Components::BasicDatepicker.new
+                         Components::BasicDatepicker.new(dialog_selector)
                        end
 
           datepicker.open(