Skip to content

fix(DateInput): use useAnchoredPosition so calendar flips and clamps to viewport - #352

Merged
garrity-miepub merged 2 commits into
mainfrom
fix/dateinput-calendar-clipping
Aug 3, 2026
Merged

fix(DateInput): use useAnchoredPosition so calendar flips and clamps to viewport#352
garrity-miepub merged 2 commits into
mainfrom
fix/dateinput-calendar-clipping

Conversation

@garrity-miepub

@garrity-miepub garrity-miepub commented Aug 3, 2026

Copy link
Copy Markdown
Collaborator

The calendar was portaled but hand-rolled its fixed positioning (always below the trigger, no flip/clamp), so it went off screen near the viewport bottom. Migrate to the shared useAnchoredPosition hook from #332.

date-input-useAnchoredPosition.mov

…to viewport

The calendar was portaled but hand-rolled its fixed positioning (always
below the trigger, no flip/clamp), so it went off screen near the
viewport bottom. Migrate to the shared useAnchoredPosition hook from #332.
Copilot AI review requested due to automatic review settings August 3, 2026 19:49
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 3, 2026

Copy link
Copy Markdown

Deploying ui with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3ac15e8
Status: ✅  Deploy successful!
Preview URL: https://4395adda.ui-6d0.pages.dev
Branch Preview URL: https://fix-dateinput-calendar-clipp.ui-6d0.pages.dev

View logs

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Migrates DateInput’s portaled calendar from a hand-rolled fixed-positioning implementation to the shared useAnchoredPosition hook so the floating panel can vertically flip, clamp to the viewport, and apply max-height constraints near the viewport edges.

Changes:

  • Replaced manual scroll/resize-driven getBoundingClientRect positioning with useAnchoredPosition({ placement: 'bottom-end' }).
  • Updated outside-click / Escape handling effect dependencies to include the new anchor/floating refs.
  • Enabled scrolling within the calendar container via overflow-auto to support the hook’s max-height clamping behavior.

Comment thread src/components/DateInput/DateInput.tsx
@garrity-miepub
garrity-miepub marked this pull request as ready for review August 3, 2026 19:55
…panels

Addresses Copilot review on #352 — overflow-auto was emitted by DateInput
and ~15 other components but never safelisted for TW3 consumers.
Copilot AI review requested due to automatic review settings August 3, 2026 19:59

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

@garrity-miepub
garrity-miepub merged commit 8e477c8 into main Aug 3, 2026
11 checks passed
@garrity-miepub
garrity-miepub deleted the fix/dateinput-calendar-clipping branch August 3, 2026 20:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants