Bug reportNov 15, 2026· 0:23· 4 views
react-datepicker: two-month range popup clips off-screen on narrow viewport
0:23 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
highPopper positioning and overflow handling of the react-datepicker popup with monthsShown=2. The popup is offset to the left of the input and is not constrained to the viewport (for example, missing preventOverflow or shift on the left boundary). Also the month containers are misaligned inside the popup width on narrow screens.
os: macOSdpr: 1locale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlincomponent: react-datepicker, selectsRange + monthsShown=2viewport_narrow: 380x720 (from 12.5s)viewport_initial: 1280x720
Repro steps
- 1.Open the 'Two-month range picker' demo (selectsRange + monthsShown=2) at a 1280x720 viewport.
- 2.Click the textbox 'Start date' to open the two-month popup.
- 3.Observe that the popup opens with December 2026 on the right and a second month on the left.
- 4.Close the popup and narrow the viewport to 380x720.
- 5.Click the textbox 'Start date' again.
- 6.Observe that the popup shows November 2026 stacked above December 2026, both clipped at the left edge.
Expected
The popup should stay inside the viewport. On desktop both months should be fully visible side by side. On a 380px viewport every day column (Su to Sa) of both months should be visible and selectable.
Actual
On desktop the left month is cut off at the left viewport edge. Only part of its header ('ber 2026') and part of its weekday columns are visible (5.0s to 9.0s). At 380x720 both stacked months are clipped at the left edge. The Su and Mo columns are hidden and only Tu to Sa are visible. The right part of the popup is an empty white area with the next arrow at its top right (15.0s to 22.9s).
Evidence
visualDesktop 1280x720: the popup's left month is cut off at the viewport edge. Its header reads only 'ber 2026' and the Su, Mo and Tu columns are not visible. December 2026 on the right renders fully. The green banner says both months show side by side, but the left month is only partly visible.
visualDesktop popup stays in the same clipped position through 9.0s, with no repositioning.
visualPopup is closed and the input still has focus.
visualViewport is narrowed to 380px. A red banner reads 'Narrow (380x720), popup clipped, Month 2 unreachable'. A second click on textbox 'Start date' is logged.
visualNarrow popup: November 2026 is stacked above December 2026. Both months show only the Tu to Sa columns. Su and Mo are cut off at the left edge, so dates such as Mon Nov 2 and Mon Dec 7 cannot be clicked.
visualNarrow popup: the right part of the popup container (up to about x=313) is empty white space and holds the next arrow. The calendar grid sits outside the visible area on the left instead of filling this space.
visualClipped narrow state is unchanged through the end of the recording.
Issue markdown (copy-paste ready)
## Summary The two-month range picker (`selectsRange` + `monthsShown=2`) renders its popup partly outside the left edge of the viewport. On desktop the left month is partly hidden. On a 380px viewport both stacked months lose their Su and Mo columns, so those dates cannot be selected. ## Environment - Browser: Chromium 151.0.7922.34 - OS: macOS - Viewport: 1280x720, then 380x720 (from 12.5s) - DPR: 1 - Locale / TZ: en-US / Europe/Berlin ## Steps to reproduce 1. Open the 'Two-month range picker' demo at 1280x720 (1.0s). 2. Click the textbox 'Start date' (3.5s). 3. Observe the popup (5.0s). 4. Close the popup and resize the viewport to 380x720 (12.5s). 5. Click the textbox 'Start date' again (12.5s). 6. Observe the stacked popup (15.0s). ## Expected The popup stays within the viewport. On desktop both months are fully visible side by side. On narrow screens every day column (Su to Sa) of both months is visible and clickable. ## Actual - **Desktop (5.0s to 9.0s):** the left month is cut off at the viewport edge. Only 'ber 2026' of its header and part of its weekday columns are visible. December 2026 renders fully. - **Narrow 380px (15.0s to 22.9s):** November 2026 and December 2026 are stacked. Both show only Tu to Sa. Su and Mo are clipped off the left edge. The right part of the popup is empty white space with the next arrow at its top right. - The recording banner at 12.5s reads 'Narrow (380x720), popup clipped, Month 2 unreachable'. ## Evidence | t (s) | Observation | |---|---| | 5.0 | Desktop popup: left month clipped, header shows 'ber 2026' | | 9.0 | Desktop popup still clipped, no repositioning | | 11.0 | Popup closed, input focused | | 12.5 | Viewport narrowed to 380px, second click on 'Start date' | | 15.0 | Narrow popup: both months missing Su/Mo columns, empty area on the right | | 22.9 | State unchanged | No console or network data was captured. ## Notes The desktop run was meant as a control, but it also shows left-edge clipping of the first month (5.0s). The problem is worse at 380px, where whole day columns become unreachable. ## Suggested area Popup positioning and overflow handling for `monthsShown=2`. The popup should be constrained to the viewport's left boundary (for example popper `preventOverflow`/`shift`). Check the alignment of the month containers inside the popup on narrow layouts. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →