Fix non working days behavior

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

@@ -13,7 +13,7 @@
       class="spot-input"
       [attr.data-value]="value"
       [id]="id"
-      [(ngModel)]="value"
+      [ngModel]="value"
       (ngModelChange)="changeValueFromInputDebounced($event)"
       (click)="onInputClick($event)"
       (focus)="opened = true"

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

@@ -264,6 +264,7 @@ export class OpModalSingleDatePickerComponent implements ControlValueAccessor, O
       },
       this.flatpickrTarget.nativeElement as HTMLElement,
     );
+    this.cdRef.detectChanges();
   }
 
   writeWorkingValue(value:string):void {

frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts

@@ -171,6 +171,7 @@ export class OpNonWorkingDaysListComponent implements OnInit, AfterViewInit {
       .forEach((el) => {
         this.nonWorkingDays.push({ ...el });
       });
+    this.cdRef.detectChanges();
   }
 
   ngAfterViewInit():void {

frontend/src/app/spot/components/drop-modal/drop-modal.component.ts

@@ -17,14 +17,7 @@ import { findAllFocusableElementsWithin } from 'core-app/shared/helpers/focus-he
 import { SpotDropModalTeleportationService } from './drop-modal-teleportation.service';
 import { filter, take } from 'rxjs/operators';
 import { debounce } from 'lodash';
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  limitShift,
-  Placement,
-  shift,
-} from '@floating-ui/dom';
+import { autoUpdate, computePosition, flip, limitShift, Placement, shift } from '@floating-ui/dom';
 
 @Component({
   selector: 'spot-drop-modal',
@@ -180,6 +173,8 @@ export class SpotDropModalComponent implements OnDestroy {
             // Index 1 because the element at index 0 is the trigger button to open the modal
             (findAllFocusableElementsWithin(document.querySelector('.spot-drop-modal-portal')!)[1])?.focus();
           }
+
+          this.cdRef.detectChanges();
         });
       });
   }

spec/features/admin/working_days_spec.rb

@@ -42,7 +42,7 @@
   CHART
 
   let(:dialog) { Components::ConfirmationDialog.new }
-  let(:datepicker) { Components::Datepicker.new }
+  let(:datepicker) { Components::DatepickerModal.new }
 
   current_user { admin }
 
@@ -187,7 +187,8 @@ def working_days_setting
     end
 
     it "can add non-working days" do
-      click_on "Non-working day"
+      # Initial loading can sometimes take a while
+      datepicker.open_modal!
 
       # Check if a date is correctly highlighted after selecting it in different time zones
       datepicker.select_day 5
@@ -197,14 +198,15 @@ def working_days_setting
       within_test_selector("op-datepicker-modal") do
         click_on "Cancel"
       end
-      click_on "Non-working day"
+
+      datepicker.open_modal!
 
       within_test_selector("op-datepicker-modal") do
         fill_in "name", with: "My holiday"
       end
 
       date1 = NonWorkingDay.maximum(:date).next_week(:monday).next_occurring(:monday)
-      datepicker.set_date date1
+      datepicker.set_date_input(date1)
 
       within_test_selector("op-datepicker-modal") do
         click_on "Add"
@@ -220,7 +222,7 @@ def working_days_setting
       end
 
       date2 = NonWorkingDay.maximum(:date).next_week(:monday).next_occurring(:tuesday)
-      datepicker.set_date date2
+      datepicker.set_date_input(date2)
 
       within_test_selector("op-datepicker-modal") do
         click_on "Add"
@@ -238,12 +240,12 @@ def working_days_setting
       expect(nwd2.date).to eq date2
 
       # Check if date and name are entered then close the datepicker
-      click_on "Non-working day"
-
+      datepicker.open_modal!
       within_test_selector("op-datepicker-modal") do
         click_on "Add"
       end
-      expect(page).to have_css(".flatpickr-calendar")
+
+      expect(page).to have_css(".flatpickr-calendar", wait: 5)
       datepicker.expect_visible
 
       within_test_selector("op-datepicker-modal") do

spec/support/components/datepicker/datepicker.rb

@@ -121,8 +121,7 @@ def expect_month(month)
       expect(field.value.to_i).to eq(month - 1)
     end
 
-    ##
-    # Expect the selected day
+    # Expect the selected day in the input
     def expect_day(value)
       expect(flatpickr_container).to have_css(".flatpickr-day.selected", text: value)
     end

spec/support/components/datepicker/datepicker_modal.rb

@@ -0,0 +1,21 @@
+module Components
+  class DatepickerModal < Datepicker
+    def open_modal!
+      retry_block do
+        click_on "Non-working day", wait: 10
+        unless page.has_css?(".flatpickr-calendar")
+          click_on "Cancel"
+          raise "Flatpickr should render a calendar"
+        end
+      end
+    end
+
+    def set_date_input(date)
+      retry_block do
+        set_date(date)
+        input = find_field("date")
+        raise "Expected date to equal #{date}, but got #{input.value}" unless input.value == date.iso8601
+      end
+    end
+  end
+end