diff --git a/libs/ui/src/lib/input/AmharicDatePicker.tsx b/libs/ui/src/lib/input/AmharicDatePicker.tsx index bf0cb0324..e883beb73 100644 --- a/libs/ui/src/lib/input/AmharicDatePicker.tsx +++ b/libs/ui/src/lib/input/AmharicDatePicker.tsx @@ -227,12 +227,18 @@ export function AmharicDatePicker({ trapFocus withArrow withinPortal - // Inside a Modal, the target sits in a scrollable container — floating-ui's - // default flip middleware measures room against that scroll container, not - // the viewport, and flips the dropdown above the field where it runs off - // the top of the screen. Keeping it pinned below and letting shift nudge it - // sideways instead avoids that. - middlewares={{ flip: false, shift: true }} + // The field lives inside a Modal's scrollable body while the dropdown is + // portaled to — a different scroll container than its reference. + // The default `absolute` strategy sums offsets across that scroll chain + // and can get it wrong (dropdown flipped off-screen, or not following + // the field as the modal scrolls). `fixed` positions purely off the + // reference's viewport rect, sidestepping that. + floatingStrategy="fixed" + // Prevents the dropdown from re-flipping position mid-interaction — + // switching months resizes the grid (Pagume has far fewer days), which + // otherwise nudges the floating box right as a nav click lands, making + // the click miss. + preventPositionChangeWhenVisible >