fix(date-picker): advance on leading-zero entry + align popover to field

- Segment auto-advance now also fires when the typed-digit count fills the
  field's width, so typing "02" completes the day and advances — while "2"
  then "9" still builds 29 (a leading zero caps the digit count).
- Anchor the calendar popover to the field group (not the calendar icon) with
  align="start", so its left edge aligns to the field's left edge and Base UI
  collision handling shifts/flips it inward near a viewport edge.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: interacsean

packages/core/src/components/date-picker-standalone.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useId, useState } from "react";
+import { useCallback, useId, useRef, useState } from "react";
 import type { CalendarDate, DateValue } from "@internationalized/date";
 import { cn } from "@/lib/utils";
 import { buildLocaleResolver, type LocalizedString } from "@/lib/i18n";
@@ -240,6 +240,7 @@ function DatePicker<T extends DateValue = DateValue>({
   const derivedInvalid = !!errorText || !!isInvalid;
 
   const [open, setOpen] = useState(false);
+  const fieldRef = useRef<HTMLDivElement>(null);
   const [val, setVal] = useControlledState<DateValue | null>(
     value ?? undefined,
     defaultValue ?? null,
@@ -284,6 +285,7 @@ function DatePicker<T extends DateValue = DateValue>({
         open={open}
         onOpenChange={setOpen}
         ariaLabel={popoverAriaLabel}
+        anchor={fieldRef}
         field={
           <DateInputGroup
             segments={fieldState.segments}
@@ -298,6 +300,7 @@ function DatePicker<T extends DateValue = DateValue>({
             labelId={labelText ? labelId : undefined}
             ariaLabel={ariaLabel}
             describedById={describedBy}
+            groupRef={fieldRef}
             trigger={<DatePickerPopoverTrigger disabled={isDisabled} />}
           />
         }

packages/core/src/components/date-picker.test.tsx

@@ -83,6 +83,38 @@ describe("DateField", () => {
       expect(last?.toString()).toBe("2025-06-15");
     });
   });
+
+  it("auto-advances across segments as a full date is typed (no explicit tabbing)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    // Locale here is "en" → MM/DD/YYYY. Typing carries across segments:
+    // "02" fills+advances month, "15" fills+advances day, "2025" fills year.
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("02152025");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2025-02-15");
+    });
+  });
+
+  it("accumulates a non-leading-zero entry (2 then 9 → 29, not 9)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<DateField label="Date" onChange={onChange} />);
+
+    await user.click(screen.getByRole("spinbutton", { name: "month" }));
+    await user.keyboard("12");
+    await user.click(screen.getByRole("spinbutton", { name: "day" }));
+    await user.keyboard("29");
+    await user.click(screen.getByRole("spinbutton", { name: "year" }));
+    await user.keyboard("2025");
+
+    await waitFor(() => {
+      expect(onChange.mock.calls.at(-1)?.[0]?.toString()).toBe("2025-12-29");
+    });
+  });
 });
 
 // ─── DatePicker ───────────────────────────────────────────────────────────────

packages/core/src/components/date-picker.tsx

@@ -141,6 +141,7 @@ interface DateInputGroupProps {
     type: Exclude<Segment["type"], "literal">,
     digit: number,
     replace?: boolean,
+    digitCount?: number,
   ) => { advance: boolean };
   setDayPeriod: (pm: boolean) => void;
   clearSegment: (type: Exclude<Segment["type"], "literal">) => void;
@@ -154,6 +155,8 @@ interface DateInputGroupProps {
   describedById?: string;
   className?: string;
   trigger?: React.ReactNode;
+  /** Ref to the group element — used to anchor the popover to the whole field. */
+  groupRef?: React.Ref<HTMLDivElement>;
 }
 
 export function DateInputGroup({
@@ -171,11 +174,13 @@ export function DateInputGroup({
   describedById,
   className,
   trigger,
+  groupRef,
 }: DateInputGroupProps) {
   const editableRefs = React.useRef<(HTMLDivElement | null)[]>([]);
-  // The segment that just gained focus and hasn't received a digit yet. Its
-  // first digit replaces the current value rather than accumulating onto it.
-  const freshSegmentRef = React.useRef<Segment["type"] | null>(null);
+  // Digits typed into the currently-focused segment this session. Reset on
+  // focus; the first digit (count 0) replaces, and the count decides when the
+  // segment is "full" and should auto-advance.
+  const typedCountRef = React.useRef(0);
 
   React.useEffect(() => {
     if (autoFocus && !isDisabled) editableRefs.current[0]?.focus();
@@ -249,16 +254,17 @@ export function DateInputGroup({
 
     if (/^\d$/.test(e.key)) {
       e.preventDefault();
-      const replace = freshSegmentRef.current === type;
-      freshSegmentRef.current = null;
-      const { advance } = setDigit(type, Number(e.key), replace);
+      const count = typedCountRef.current;
+      typedCountRef.current = count + 1;
+      const { advance } = setDigit(type, Number(e.key), count === 0, count + 1);
       if (advance) focusEditable(editableIndex + 1);
     }
   };
 
   return (
     // Deliberate APG date-field pattern: a labelled group wrapping spinbutton segments.
     <div
+      ref={groupRef}
       role="group"
       data-slot="date-picker-group"
       aria-labelledby={labelId}
@@ -309,7 +315,7 @@ export function DateInputGroup({
               aria-valuenow={segment.value}
               aria-valuetext={segment.isPlaceholder ? "Empty" : segment.text}
               onFocus={() => {
-                freshSegmentRef.current = segment.type;
+                typedCountRef.current = 0;
               }}
               onKeyDown={(e) => handleKeyDown(e, segment, editableIndex)}
               className={cn(
@@ -571,14 +577,27 @@ interface DatePopoverProps {
   field: React.ReactNode;
   children: React.ReactNode;
   ariaLabel?: string;
+  /**
+   * Element to position the calendar against. Defaults to the trigger; pass the
+   * field group so the calendar aligns to the field's edge (not the icon),
+   * overlapping it horizontally and shifting inward near the viewport edge.
+   */
+  anchor?: React.RefObject<HTMLElement | null>;
 }
 
-export function DatePopover({ open, onOpenChange, field, children, ariaLabel }: DatePopoverProps) {
+export function DatePopover({
+  open,
+  onOpenChange,
+  field,
+  children,
+  ariaLabel,
+  anchor,
+}: DatePopoverProps) {
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       {field}
       <Popover.Portal>
-        <Popover.Positioner sideOffset={4} side="bottom" align="start">
+        <Popover.Positioner anchor={anchor} sideOffset={4} side="bottom" align="start">
           {/* APG date-picker dialog pattern — the popup is a labelled dialog. */}
           <Popover.Popup
             role="dialog"

packages/core/src/components/use-date-field-state.ts

@@ -43,6 +43,19 @@ const TIME_BY_GRANULARITY: Record<Granularity, EditableSegmentType[]> = {
   second: ["hour", "minute", "second"],
 };
 
+// Max digits a segment accepts before it's "full" and auto-advances. A leading
+// zero counts, so typing "02" (2 digits) completes the day and advances —
+// while typing "2" then "9" still builds 29.
+const SEGMENT_MAX_DIGITS: Record<EditableSegmentType, number> = {
+  year: 4,
+  month: 2,
+  day: 2,
+  hour: 2,
+  minute: 2,
+  second: 2,
+  dayPeriod: 0,
+};
+
 type Fields = Partial<Record<EditableSegmentType, number>>;
 
 export interface Segment {
@@ -291,16 +304,23 @@ export function useDateFieldState(options: DateFieldStateOptions) {
   );
 
   const setDigit = useCallback(
-    (type: EditableSegmentType, digit: number, replace = false): { advance: boolean } => {
+    (
+      type: EditableSegmentType,
+      digit: number,
+      replace = false,
+      digitCount = 1,
+    ): { advance: boolean } => {
       if (isReadOnly || type === "dayPeriod") return { advance: false };
       const { min, max } = getLimits(type);
       // `replace` (first digit after the segment gains focus) starts fresh
       // rather than accumulating onto the existing value.
       const current = replace ? undefined : fields[type];
       let next = current != null && current * 10 + digit <= max ? current * 10 + digit : digit;
       if (next < min) next = digit;
-      // Auto-advance once the segment can't accept another digit.
-      const advance = next * 10 > max;
+      // Auto-advance when the segment can't accept another digit (value too
+      // large) OR the field is digit-width-full (so a leading-zero entry like
+      // "02" advances, while "2" still waits for a possible second digit).
+      const advance = next * 10 > max || digitCount >= SEGMENT_MAX_DIGITS[type];
       commit({ ...fields, [type]: next });
       return { advance };
     },