From 4add215cc27a9c8003be02d719ecd2cefef42006 Mon Sep 17 00:00:00 2001
From: m2rt <mart@bitweb.ee>
Date: Mon, 9 Mar 2026 17:57:23 +0200
Subject: [PATCH] fix(date-picker): dynamic datepicker position fix #347

---
 .../date-picker/date-picker.component.html    |  1 +
 .../date-picker/date-picker.component.spec.ts | 26 +++++++++++++++++++
 .../overlay/popover/popover.component.html    |  1 +
 .../overlay/popover/popover.component.spec.ts |  9 +++++++
 .../overlay/popover/popover.component.ts      |  5 ++++
 5 files changed, 42 insertions(+)

diff --git a/tedi/components/form/date-picker/date-picker.component.html b/tedi/components/form/date-picker/date-picker.component.html
index 34b5229da..679399c34 100644
--- a/tedi/components/form/date-picker/date-picker.component.html
+++ b/tedi/components/form/date-picker/date-picker.component.html
@@ -38,6 +38,7 @@
     style="display: flex; align-items: center"
     position="bottom-end"
     [withArrow]="false"
+    [preventOverflow]="true"
   >
     <button
       tedi-button
diff --git a/tedi/components/form/date-picker/date-picker.component.spec.ts b/tedi/components/form/date-picker/date-picker.component.spec.ts
index bece94c8d..c10ad1c1e 100644
--- a/tedi/components/form/date-picker/date-picker.component.spec.ts
+++ b/tedi/components/form/date-picker/date-picker.component.spec.ts
@@ -1252,4 +1252,30 @@ describe("DatePickerComponent", () => {
       expect(component.inputValue()).toBe("");
     });
   });
+
+  describe("inputValue signal to DOM synchronization", () => {
+    it("should update visible input value when inputValue signal changes", () => {
+      const input = getInput();
+
+      expect(input.value).toBe("");
+
+      component.inputValue.set("20.03.2024");
+      fixture.detectChanges();
+
+      expect(input.value).toBe("20.03.2024");
+    });
+
+    it("should clear visible input value when inputValue signal is set to empty string", () => {
+      component.inputValue.set("15.06.2024");
+      fixture.detectChanges();
+
+      const input = getInput();
+      expect(input.value).toBe("15.06.2024");
+
+      component.inputValue.set("");
+      fixture.detectChanges();
+
+      expect(input.value).toBe("");
+    });
+  });
 });
diff --git a/tedi/components/overlay/popover/popover.component.html b/tedi/components/overlay/popover/popover.component.html
index a4faf0be6..729e2f569 100644
--- a/tedi/components/overlay/popover/popover.component.html
+++ b/tedi/components/overlay/popover/popover.component.html
@@ -7,6 +7,7 @@
   [floatUiLoose]="floatUiComponent"
   [targetElement]="popoverTrigger().host.nativeElement"
   [loosePlacement]="position()"
+  [preventOverflow]="position().includes('auto') ? false : preventOverflow()"
   [applyClass]="floatUiContainerClass()"
   [disableAnimation]="true"
 >
diff --git a/tedi/components/overlay/popover/popover.component.spec.ts b/tedi/components/overlay/popover/popover.component.spec.ts
index 7aa319eb4..6ef685127 100644
--- a/tedi/components/overlay/popover/popover.component.spec.ts
+++ b/tedi/components/overlay/popover/popover.component.spec.ts
@@ -11,6 +11,7 @@ import { PopoverContentComponent } from "./popover-content/popover-content.compo
   template: `
     <tedi-popover
       [position]="position"
+      [preventOverflow]="preventOverflow"
       [dismissible]="dismissible"
       [hideOnScroll]="hideOnScroll"
       [withBorder]="withBorder"
@@ -26,6 +27,7 @@ import { PopoverContentComponent } from "./popover-content/popover-content.compo
 })
 class TestHostComponent {
   position: PopoverPosition = "top";
+  preventOverflow = false;
   dismissible = true;
   hideOnScroll = false;
   withBorder = false;
@@ -61,11 +63,18 @@ describe("PopoverComponent", () => {
 
   it("should have default inputs", () => {
     expect(component.position()).toBe("top");
+    expect(component.preventOverflow()).toBe(false);
     expect(component.dismissible()).toBe(true);
     expect(component.hideOnScroll()).toBe(false);
     expect(component.withBorder()).toBe(false);
   });
 
+  it("should update preventOverflow when input changes", () => {
+    hostComponent.preventOverflow = true;
+    fixture.detectChanges();
+    expect(component.preventOverflow()).toBe(true);
+  });
+
   it("should initialize the ViewChild floatUiComponent", () => {
     const instance = component.floatUiComponent();
     expect(instance).toBeInstanceOf(NgxFloatUiContentComponent);
diff --git a/tedi/components/overlay/popover/popover.component.ts b/tedi/components/overlay/popover/popover.component.ts
index 344af089e..be0db3dbe 100644
--- a/tedi/components/overlay/popover/popover.component.ts
+++ b/tedi/components/overlay/popover/popover.component.ts
@@ -38,6 +38,11 @@ export class PopoverComponent implements AfterContentChecked {
    * @default top
    */
   position = input<PopoverPosition>("top");
+  /**
+   * Should position flip to opposite direction when overflowing screen?
+   * @default false
+   */
+  preventOverflow = input(false);
   /**
    * Is dismissible by clicking outside of content?
    * @default true