fix(datepicker): displayed value not changing on external update #322

Author: m2rt

tedi/components/form/date-picker/date-picker.component.spec.ts

@@ -1230,4 +1230,26 @@ describe("DatePickerComponent", () => {
       jest.useRealTimers();
     });
   });
+
+  describe("External selected input changes", () => {
+    it("should update inputValue when selected input is changed externally", () => {
+      const date = new Date(2024, 5, 15);
+      fixture.componentRef.setInput("selected", date);
+      fixture.detectChanges();
+
+      expect(component.inputValue()).toBe("15.06.2024");
+    });
+
+    it("should clear inputValue when selected input is set to null externally", () => {
+      fixture.componentRef.setInput("selected", new Date(2024, 5, 15));
+      fixture.detectChanges();
+
+      expect(component.inputValue()).toBe("15.06.2024");
+
+      fixture.componentRef.setInput("selected", null);
+      fixture.detectChanges();
+
+      expect(component.inputValue()).toBe("");
+    });
+  });
 });

tedi/components/form/date-picker/date-picker.component.ts

@@ -10,6 +10,7 @@ import {
   OnInit,
   viewChild,
   ElementRef,
+  effect,
 } from "@angular/core";
 import { ButtonComponent } from "../../buttons/button/button.component";
 import { ClosingButtonComponent } from "../../buttons/closing-button/closing-button.component";
@@ -272,11 +273,15 @@ export class DatePickerComponent implements OnInit {
 
   readonly translationService = inject(TediTranslationService);
 
-  ngOnInit(): void {
-    const selected = this.selected();
-    this.inputValue.set(selected ? formatDate(selected) : "");
+  constructor() {
+    effect(() => {
+      const selected = this.selected();
+      this.inputValue.set(selected ? formatDate(selected) : "");
+    });
+  }
 
-    let active = selected ?? this.today;
+  ngOnInit(): void {
+    let active = this.selected() ?? this.today;
 
     // If the initial active date is disabled, find the first enabled date
     if (this.isDisabled(active)) {