@astryxdesign/core 0.7.5 → 0.7.6-canary.0bd3b37

package/src/DateInput/MonthScroller.tsx

@@ -85,6 +85,9 @@ const DAY_SIZE = dateInputTouchSizes.daySize;
  */
 const OVERSCAN = 3;
 
+/** Every listener on the scroller is passive; one options object serves all. */
+const PASSIVE: AddEventListenerOptions = {passive: true};
+
 const styles = stylex.create({
   scroller: {
     position: 'relative',
@@ -326,13 +329,59 @@ export function MonthScroller({
   // updater — React runs updaters during render, where another component's
   // setState is illegal.
   const centerRowRef = useRef(centerRow);
+
+  /**
+   * Scroll snapping is off from a re-center until the frame after its
+   * commit. WebKit keeps the position it snapped to as an index into the
+   * container's snap offsets, and re-snaps to that index after a layout: a
+   * re-center that unmounts panes before the snapped one shifts the index,
+   * so the re-snap lands a month further on, and the scroll that makes
+   * re-centers again. One stalled frame right after an arrow (300 ms,
+   * measured) was enough to set the calendar paging on by itself, a month
+   * every few frames. With snapping off across the commit nothing re-snaps,
+   * and switching it back on a frame later snaps to the pane in place.
+   *
+   * Each pause counts itself, so a batch of re-centers that ends on the
+   * center it began from, which commits no new center, still restores
+   * snapping.
+   *
+   * Not while a finger drives the scroll, from its touch until the scroll it
+   * started comes to rest: iOS tracks a snap target for the gesture, and
+   * turning snapping off drops it, so the swipe coasted past the month for
+   * about two seconds and was corrected late (iOS 26.2 simulator, where the
+   * same swipe snaps in about 0.6 s with snapping left on).
+   */
+  const [snapPauses, setSnapPauses] = useState(0);
+  const isFingerScrollRef = useRef(false);
+  const recenter = useCallback((scroller: HTMLElement, row: number) => {
+    if (!isFingerScrollRef.current) {
+      scroller.style.scrollSnapType = 'none';
+      setSnapPauses(count => count + 1);
+    }
+    setCenterRow(row);
+  }, []);
+  // Synchronizes the scroller's snapping with the browser's frame loop: it
+  // comes back on in the frame after the pause's commit, and a restore still
+  // pending at the next pause or at unmount is dropped.
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    if (snapPauses === 0 || scroller == null) {
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => {
+      scroller.style.scrollSnapType = '';
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [snapPauses]);
   // A row to scroll to once its pane is mounted; see scrollToMonth.
   const pendingScrollRef = useRef<number | null>(null);
 
   /**
    * The row a programmatic scroll is heading for, so its own scroll events
-   * are not reported back as if the user had gone there. Null once a finger
-   * touches the scroller, or once the steered scroll has arrived.
+   * are not reported back as if the user had gone there, and so the settle
+   * correction finishes the steer instead of rounding it back. Null once the
+   * user's own input reaches the scroller (a finger, a wheel or trackpad, a
+   * press, a key), or once the steered scroll has arrived.
    */
   const steeredRowRef = useRef<number | null>(null);
 
@@ -401,7 +450,12 @@ export function MonthScroller({
         // below); a jump that far is never worth animating either.
         pendingScrollRef.current = row;
         centerRowRef.current = row;
-        setCenterRow(row);
+        // The jump is a steer too. Recording it replaces a steer left behind
+        // by a scroll that moved nothing (the re-assert when the month and
+        // year wheels close), which the settle would otherwise finish,
+        // pulling the scroller back off the jump's month.
+        steeredRowRef.current = row;
+        recenter(scroller, row);
         return;
       }
       steeredRowRef.current = row;
@@ -410,7 +464,7 @@ export function MonthScroller({
         behavior,
       });
     },
-    [paneSize, minMonthIndex, rowCount, isRTL],
+    [paneSize, minMonthIndex, rowCount, isRTL, recenter],
   );
 
   // Deliberately un-keyed: it runs after every render, costs a null check, and
@@ -476,8 +530,11 @@ export function MonthScroller({
    * A tail crawling slower than half a pixel a frame has effectively arrived,
    * so treating it as arrived is right anyway.
    *
-   * The correction is at most half a pane by construction, and its own scroll
-   * settles onto the boundary it just aimed at, so it cannot oscillate.
+   * After the user's own scroll the correction goes to the nearest boundary,
+   * at most half a pane away. After a steer it goes on to the steered month,
+   * however early the browser cut the steer short. Either way its own scroll
+   * settles onto the boundary it aimed at, where a steer counts as arrived, so
+   * it cannot oscillate.
    */
   const settleFrameRef = useRef<number | undefined>(undefined);
   useEffect(
@@ -490,6 +547,8 @@ export function MonthScroller({
   );
 
   useScrollSettle(scrollerRef, scroller => {
+    // At rest, momentum included: the finger no longer drives the scroll.
+    isFingerScrollRef.current = false;
     if (paneSize === 0) {
       return;
     }
@@ -505,15 +564,22 @@ export function MonthScroller({
       if (Math.abs(scroller.scrollLeft - offsetBefore) >= 0.5) {
         return;
       }
-      const row = rowAtScrollOffset(
-        scroller.scrollLeft,
-        paneSize,
-        rowCount,
-        isRTL,
-      );
+      // A steer the browser cut short is finished, not rounded back. WebKit
+      // ends a smooth scroll that a second one retargeted once the first
+      // one's time is up, firing `scrollend` part-way: an arrow tapped late
+      // in the previous arrow's scroll stopped near that month, and rounding
+      // to the nearest pane put the scroller back on it while the title named
+      // the new one.
+      const steered = steeredRowRef.current;
+      const row =
+        steered ??
+        rowAtScrollOffset(scroller.scrollLeft, paneSize, rowCount, isRTL);
       const target = scrollOffsetForRow(row, paneSize, isRTL);
       // Sub-pixel drift is the browser's own rounding, not a failed snap.
       if (Math.abs(scroller.scrollLeft - target) < 1) {
+        // At rest on its target, a steer has arrived even if no scroll
+        // crossed into its month.
+        steeredRowRef.current = null;
         return;
       }
       scroller.scrollTo({left: target, behavior: 'smooth'});
@@ -554,11 +620,20 @@ export function MonthScroller({
     if (scroller == null || paneSize === 0) {
       return;
     }
-    // A finger on the scroller ends any steering: from here the months it
-    // passes are the user's doing and every one of them is worth reporting.
-    const onTouchStart = () => {
+    // A finger, a wheel or trackpad, a press or a key on the scroller ends any
+    // steering: from here the months it passes are the user's doing, every
+    // one of them is worth reporting, and the settle rounds to the nearest
+    // month instead of finishing a steer. A steer that moved nothing (the
+    // re-assert when the month and year wheels close on the month shown)
+    // would otherwise pull the user's next scroll back to its month.
+    const endSteer = () => {
       steeredRowRef.current = null;
     };
+    // From a touch until its scroll comes to rest (the settle above), the
+    // finger drives the scroll and a re-center leaves snapping on.
+    const onTouchStart = () => {
+      isFingerScrollRef.current = true;
+    };
 
     const onScroll = () => {
       if (frameRef.current != null) {
@@ -576,7 +651,7 @@ export function MonthScroller({
           return;
         }
         centerRowRef.current = row;
-        setCenterRow(row);
+        recenter(scroller, row);
         // Report nothing while a steer is in flight. `scrollToMonth` is only
         // ever called by something that already knows the month — a wheel
         // commit, a header arrow, the re-assert when the wheels close — so
@@ -590,9 +665,9 @@ export function MonthScroller({
         // the exact moment reports start being trusted again. The month drifted
         // on the way back to the calendar.
         //
-        // Cleared on arrival, or by a touch below — once a finger is on the
-        // scroller the user owns it, and every month it passes is worth
-        // reporting.
+        // Cleared on arrival, or by the user's input below (a finger, a wheel
+        // or trackpad, a press, a key) — from then the user owns the scroller,
+        // and every month it passes is worth reporting.
         if (steeredRowRef.current != null) {
           if (steeredRowRef.current === row) {
             steeredRowRef.current = null;
@@ -602,17 +677,26 @@ export function MonthScroller({
         onVisibleMonthChangeRef.current(minMonthIndex + row);
       });
     };
-    scroller.addEventListener('scroll', onScroll, {passive: true});
-    scroller.addEventListener('touchstart', onTouchStart, {passive: true});
+    scroller.addEventListener('scroll', onScroll, PASSIVE);
+    // The user's input on the scroller ends a steer: from here, it's theirs.
+    scroller.addEventListener('touchstart', endSteer, PASSIVE);
+    scroller.addEventListener('wheel', endSteer, PASSIVE);
+    scroller.addEventListener('pointerdown', endSteer, PASSIVE);
+    scroller.addEventListener('keydown', endSteer, PASSIVE);
+    scroller.addEventListener('touchstart', onTouchStart, PASSIVE);
     return () => {
-      scroller.removeEventListener('scroll', onScroll);
-      scroller.removeEventListener('touchstart', onTouchStart);
+      scroller.removeEventListener('scroll', onScroll, PASSIVE);
+      scroller.removeEventListener('touchstart', endSteer, PASSIVE);
+      scroller.removeEventListener('wheel', endSteer, PASSIVE);
+      scroller.removeEventListener('pointerdown', endSteer, PASSIVE);
+      scroller.removeEventListener('keydown', endSteer, PASSIVE);
+      scroller.removeEventListener('touchstart', onTouchStart, PASSIVE);
       if (frameRef.current != null) {
         cancelAnimationFrame(frameRef.current);
         frameRef.current = undefined;
       }
     };
-  }, [paneSize, rowCount, minMonthIndex, isRTL]);
+  }, [paneSize, rowCount, minMonthIndex, isRTL, recenter]);
 
   // Move the keyboard focus by whole days and let the scroller follow. Paging
   // by month is PageUp/PageDown; everything else is the APG grid vocabulary.

package/src/DateInput/TouchDateField.tsx

@@ -772,7 +772,7 @@ export function TouchDateField({
 
   const fireChange = useCallback(
     (newValue: ISODateString | undefined) => {
-      if (isBusy) {
+      if (isEffectivelyDisabled) {
         return;
       }
       onChange?.(newValue);
@@ -783,7 +783,13 @@ export function TouchDateField({
         });
       }
     },
-    [isBusy, onChange, changeAction, startTransition, setOptimisticValue],
+    [
+      isEffectivelyDisabled,
+      onChange,
+      changeAction,
+      startTransition,
+      setOptimisticValue,
+    ],
   );
 
   const openSheet = useCallback(() => {
@@ -841,6 +847,11 @@ export function TouchDateField({
    * value is still cleared either way — that half never depends on the range.
    */
   const handleResetInSheet = useCallback(() => {
+    // Disabled: reject the entire reset without closing or moving focus.
+    // Busy-only fields keep month navigation; fireChange blocks the clear.
+    if (isDisabled) {
+      return;
+    }
     fireChange(undefined);
     const currentMonth = monthIndexOf(today);
     if (currentMonth < minMonthIndex || currentMonth > maxMonthIndex) {
@@ -851,7 +862,7 @@ export function TouchDateField({
     }
     setMonthIndex(currentMonth);
     scrollerHandleRef.current?.scrollToMonth(currentMonth, 'smooth');
-  }, [fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
+  }, [isDisabled, fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
 
   // Selection commits on the tap and leaves the sheet up, so a mistake can be
   // corrected in place and a nearby date reconsidered without reopening.

package/src/DateInput/Wheel.tsx

@@ -12,7 +12,7 @@
  * rubber-banding, and the settle animation are the platform's; all this adds
  * is `scroll-snap-align: center` on each option, half a viewport of padding at
  * each end so the first and last option can reach the middle, and a commit
- * when the scrolling stops.
+ * when the scrolling stops and no finger or mouse drag still holds it.
  *
  * The falloff (rows fading and tipping away from the centre) is a CSS
  * scroll-driven animation on a `view()` timeline — the browser interpolates it
@@ -259,6 +259,13 @@ export function Wheel({
   // `selectedIndex` only catches up when the wheel settles.
   const [activeIndex, setActiveIndex] = useState(selectedIndex);
 
+  // A mouse cannot drag a scroll container, so without this the wheel ignores
+  // the one gesture its shape invites. Touch is untouched — it pans natively,
+  // with momentum this could not match. See usePointerDragScroll. The drag it
+  // holds is not rest either: the settle below waits for its release, as it
+  // waits for a finger's (useScrollSettle).
+  const {isDraggingRef} = usePointerDragScroll(scrollerRef, isActive);
+
   // Row height in px, read from layout rather than assumed, so a theme that
   // retunes --date-input-touch-wheel-item-size still lands on the right row.
   const itemBlockSize = useCallback((): number => {
@@ -306,6 +313,7 @@ export function Wheel({
       }
     },
     isActive,
+    isDraggingRef,
   );
 
   // Park the committed row under the band whenever the wheel is shown, or the
@@ -375,11 +383,6 @@ export function Wheel({
   // there is no way to share — it takes every touch that lands on it.
   useOwnScrollGesture(scrollerRef, 'all', {isEnabled: isActive});
 
-  // A mouse cannot drag a scroll container, so without this the wheel ignores
-  // the one gesture its shape invites. Touch is untouched — it pans natively,
-  // with momentum this could not match. See usePointerDragScroll.
-  usePointerDragScroll(scrollerRef, isActive);
-
   const moveBy = useCallback(
     (delta: number) => {
       const next = Math.min(

package/src/DateInput/usePointerDragScroll.ts

@@ -5,7 +5,8 @@
 /**
  * @file usePointerDragScroll.ts
  * @input A scroll container ref
- * @output Lets a mouse drag the container's contents the way a finger does
+ * @output Lets a mouse drag the container's contents the way a finger does,
+ *   and reports while a drag holds it (`isDraggingRef`)
  * @position Internal behavior hook; consumed by Wheel.tsx
  *
  * ## Why this exists
@@ -38,12 +39,20 @@
  * then jumps a whole one. The drag therefore suspends snapping, and restores
  * it once the release has settled somewhere legal.
  *
+ * ## A held drag is not rest
+ *
+ * Every `scrollTop` the drag assigns is a programmatic scroll, and Chromium
+ * ends each one with a `scrollend` — 14 moves, 14 of them. A settle listening
+ * for `scrollend` alone would commit the row under the band at every step,
+ * with the button still down. `isDraggingRef` tells `useScrollSettle` the
+ * drag is still held, the way a touch that has not ended does.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/Wheel.tsx
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
 
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 
 /**
  * Movement below this stays a click. A mouse shifts a pixel or two under the
@@ -54,6 +63,16 @@ export const DRAG_SLOP = 4;
 /** How long to wait for a release's settle before restoring snapping. */
 const SETTLE_FALLBACK_MS = 260;
 
+/** What {@link usePointerDragScroll} reports back about the drag. */
+export type PointerDragScrollState = {
+  /**
+   * True while a mouse drag holds the container: from the press that moved
+   * past {@link DRAG_SLOP} until its release. Pass it to `useScrollSettle`,
+   * which treats a held drag as it treats a finger still down.
+   */
+  isDraggingRef: React.RefObject<boolean>;
+};
+
 /**
  * Let a mouse drag `ref`'s contents, on a container that already scrolls and
  * snaps for touch.
@@ -65,7 +84,9 @@ const SETTLE_FALLBACK_MS = 260;
 export function usePointerDragScroll(
   ref: React.RefObject<HTMLElement | null>,
   isEnabled: boolean = true,
-): void {
+): PointerDragScrollState {
+  const isDraggingRef = useRef(false);
+
   useEffect(() => {
     const element = ref.current;
     if (element == null || !isEnabled) {
@@ -75,9 +96,9 @@ export function usePointerDragScroll(
     let pointerId: number | null = null;
     let originY = 0;
     let originScrollTop = 0;
-    let isDragging = false;
+    isDraggingRef.current = false;
     // Survives from the drag's end to the click it produces, which is the
-    // whole reason it is not just `isDragging`.
+    // whole reason it is not just `isDraggingRef`.
     let wasDragged = false;
     let restoreTimer: number | undefined;
 
@@ -120,7 +141,7 @@ export function usePointerDragScroll(
       pointerId = event.pointerId;
       originY = event.clientY;
       originScrollTop = element.scrollTop;
-      isDragging = false;
+      isDraggingRef.current = false;
       // Not captured yet: a press that never moves has to stay a click on the
       // row under it, and capturing here would retarget that click.
     };
@@ -130,11 +151,11 @@ export function usePointerDragScroll(
         return;
       }
       const delta = event.clientY - originY;
-      if (!isDragging) {
+      if (!isDraggingRef.current) {
         if (Math.abs(delta) < DRAG_SLOP) {
           return;
         }
-        isDragging = true;
+        isDraggingRef.current = true;
         element.setPointerCapture(event.pointerId);
         suspendSnap();
         // Dragging across rows would otherwise select their text, leaving the
@@ -151,10 +172,10 @@ export function usePointerDragScroll(
         return;
       }
       pointerId = null;
-      if (!isDragging) {
+      if (!isDraggingRef.current) {
         return;
       }
-      isDragging = false;
+      isDraggingRef.current = false;
       wasDragged = true;
       element.style.removeProperty('user-select');
       if (element.hasPointerCapture(event.pointerId)) {
@@ -204,9 +225,12 @@ export function usePointerDragScroll(
       element.removeEventListener('pointerup', onPointerEnd);
       element.removeEventListener('pointercancel', onPointerEnd);
       element.removeEventListener('click', onClickCapture, {capture: true});
+      isDraggingRef.current = false;
       restoreSnap();
     };
   }, [ref, isEnabled]);
+
+  return {isDraggingRef};
 }
 
 /**

package/src/DateInput/useScrollSettle.ts

@@ -4,7 +4,8 @@
 
 /**
  * @file useScrollSettle.ts
- * @input A scroll container ref and a settle callback
+ * @input A scroll container ref, a settle callback, and optionally whether a
+ *   mouse drag holds it (usePointerDragScroll's `isDraggingRef`)
  * @output Calls back once, after scrolling (including momentum) stops
  * @position Internal behavior hook; consumed by Wheel.tsx and MonthScroller.tsx
  *
@@ -27,7 +28,10 @@
  *    moment without lifting and the scroll events stop, so the timer fires
  *    and the value commits to whatever is under the band. Chrome hides this
  *    because it has `scrollend`, which does not fire until the touch is
- *    released.
+ *    released. A mouse drag (usePointerDragScroll) is held the same way, and
+ *    there Chrome gives no cover at all: each `scrollTop` the drag assigns
+ *    ends in its own `scrollend`, so the settle waits for the drag's
+ *    `pointerup` as it waits for `touchend`.
  *
  * 2. **Momentum is not rest either.** iOS momentum runs on the UI thread and
  *    keeps going for a second or more after the finger is gone, and its scroll
@@ -41,7 +45,7 @@
  * underneath, and the fresh scroll events start the next premature settle —
  * each one landing a row further along, which is why the month climbed.
  *
- * So: the settle waits for the touch to end, and then for a quiet period
+ * So: the settle waits for the touch or the mouse drag to end, and then for a quiet period
  * measured from the LAST scroll event, which is what makes it outlast
  * momentum however long it runs. {@link useScrollSettle} also reports whether
  * the scroller is at rest, so a caller can refuse to reposition one that is
@@ -77,11 +81,14 @@ export type ScrollSettleState = {
  * @param ref - the scroll container
  * @param onSettle - called with the settled element; may change every render
  * @param isEnabled - skip attaching while false (e.g. a hidden panel)
+ * @param isHeldRef - true while a mouse drag holds the scroller
+ *   (usePointerDragScroll's `isDraggingRef`): not rest, however quiet
  */
 export function useScrollSettle(
   ref: React.RefObject<HTMLElement | null>,
   onSettle: (element: HTMLElement) => void,
   isEnabled: boolean = true,
+  isHeldRef?: React.RefObject<boolean>,
 ): ScrollSettleState {
   // The callback closes over render-fresh values (the option list, the current
   // value); keeping it in a ref means the listeners attach once instead of
@@ -101,11 +108,18 @@ export function useScrollSettle(
     let timer: ReturnType<typeof setTimeout> | undefined;
     let hasSettled = false;
     let isTouching = false;
+    // Whether a mouse drag held this gesture, so its release re-arms the
+    // settle; a plain click does not.
+    let wasHeld = false;
 
     const settle = () => {
-      // A finger still on the glass is not rest, however quiet the scroller
-      // has gone. The release re-arms this.
-      if (hasSettled || isTouching) {
+      // A finger still on the glass, or a mouse button still holding a drag,
+      // is not rest, however quiet the scroller has gone. The release re-arms
+      // this.
+      if (isHeldRef?.current) {
+        wasHeld = true;
+      }
+      if (hasSettled || isTouching || isHeldRef?.current) {
         return;
       }
       hasSettled = true;
@@ -126,6 +140,9 @@ export function useScrollSettle(
       // the last of it however long it runs.
       hasSettled = false;
       isAtRestRef.current = false;
+      if (isHeldRef?.current) {
+        wasHeld = true;
+      }
       arm();
     };
 
@@ -144,11 +161,23 @@ export function useScrollSettle(
       arm();
     };
 
+    const onPointerEnd = () => {
+      // The drag's release: its glide to the nearest row re-arms this on its
+      // own, and the timer covers a release already on a row, which scrolls
+      // no further.
+      if (wasHeld) {
+        wasHeld = false;
+        arm();
+      }
+    };
+
     element.addEventListener('scroll', onScroll, {passive: true});
     element.addEventListener('scrollend', settle);
     element.addEventListener('touchstart', onTouchStart, {passive: true});
     element.addEventListener('touchend', onTouchEnd, {passive: true});
     element.addEventListener('touchcancel', onTouchEnd, {passive: true});
+    element.addEventListener('pointerup', onPointerEnd);
+    element.addEventListener('pointercancel', onPointerEnd);
 
     return () => {
       clearTimeout(timer);
@@ -157,8 +186,10 @@ export function useScrollSettle(
       element.removeEventListener('touchstart', onTouchStart);
       element.removeEventListener('touchend', onTouchEnd);
       element.removeEventListener('touchcancel', onTouchEnd);
+      element.removeEventListener('pointerup', onPointerEnd);
+      element.removeEventListener('pointercancel', onPointerEnd);
     };
-  }, [ref, isEnabled]);
+  }, [ref, isEnabled, isHeldRef]);
 
   return {isAtRestRef};
 }

package/src/DateRangeInput/DateRangeInput.tsx

@@ -613,7 +613,7 @@ export function DateRangeInput({
 
   const fireChange = useCallback(
     (newValue: DateRange | null) => {
-      if (isBusy) {
+      if (isEffectivelyDisabled) {
         return;
       }
       onChange(newValue);
@@ -624,7 +624,13 @@ export function DateRangeInput({
         });
       }
     },
-    [isBusy, onChange, changeAction, startTransition, setOptimisticValue],
+    [
+      isEffectivelyDisabled,
+      onChange,
+      changeAction,
+      startTransition,
+      setOptimisticValue,
+    ],
   );
 
   const handleToggle = useCallback(() => {
@@ -639,10 +645,13 @@ export function DateRangeInput({
 
   const handleRangeSelect = useCallback(
     (range: DateRange) => {
+      if (isDisabled) {
+        return;
+      }
       fireChange(range);
       popover.hide();
     },
-    [fireChange, popover],
+    [isDisabled, fireChange, popover],
   );
 
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -813,6 +822,7 @@ export function DateRangeInput({
                 const presetRange = preset.getRange();
                 const isActive = isRangeEqual(value, presetRange);
                 const isPresetDisabled =
+                  isDisabled ||
                   !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) ||
                   isDateDisabled(plainDateFromISO(presetRange.start)) ||
                   isDateDisabled(plainDateFromISO(presetRange.end));
@@ -828,6 +838,11 @@ export function DateRangeInput({
                     aria-current={isActive ? 'true' : undefined}
                     // Focusable while disabled (AR3, spec:AST-085 FR1).
                     aria-disabled={isPresetDisabled || undefined}
+                    aria-describedby={
+                      showsDisabledMessage
+                        ? disabledMessageTooltip.describedBy
+                        : undefined
+                    }
                     onClick={() => {
                       if (!isPresetDisabled) {
                         handleRangeSelect(presetRange);
@@ -851,18 +866,22 @@ export function DateRangeInput({
               })}
             </div>
           )}
-          <Calendar
-            mode="range"
-            value={optimisticValue}
-            onChange={handleRangeSelect}
-            min={min}
-            max={max}
-            dateConstraints={dateConstraints}
-            maxRangeSpan={maxRangeSpan}
-            minRangeSpan={minRangeSpan}
-            numberOfMonths={numberOfMonths}
-            weekStartsOn={weekStartsOn}
-          />
+          {/* The layer renders its children open or closed, so mount the
+              calendar only while it is open. */}
+          {popover.isOpen && (
+            <Calendar
+              mode="range"
+              value={optimisticValue}
+              onChange={handleRangeSelect}
+              min={min}
+              max={max}
+              dateConstraints={dateConstraints}
+              maxRangeSpan={maxRangeSpan}
+              minRangeSpan={minRangeSpan}
+              numberOfMonths={numberOfMonths}
+              weekStartsOn={weekStartsOn}
+            />
+          )}
         </div>,
         {placement: 'below', alignment: 'start'},
       )}