@mui/x-date-pickers 9.5.0 → 9.7.0

package/internals/hooks/useDesktopPicker/useDesktopPicker.types.d.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { BasePickerProps } from "../../models/props/basePickerProps.js";
-import { PickerPopperSlots, PickerPopperSlotProps } from "../../components/PickerPopper/PickerPopper.js";
-import { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
-import { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
-import { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
-import { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
-import { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
-import { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
+import type * as React from 'react';
+import type { MakeRequired, SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import type { BasePickerProps } from "../../models/props/basePickerProps.js";
+import type { PickerPopperSlots, PickerPopperSlotProps } from "../../components/PickerPopper/PickerPopper.js";
+import type { UsePickerParameters, UsePickerNonStaticProps, UsePickerProps } from "../usePicker/index.js";
+import type { PickerFieldSlotProps, PickerOwnerState } from "../../../models/index.js";
+import type { ExportedPickersLayoutSlots, ExportedPickersLayoutSlotProps, PickersLayoutSlotProps } from "../../../PickersLayout/PickersLayout.types.js";
+import type { DateOrTimeViewWithMeridiem, PickerValue } from "../../models/index.js";
+import type { PickerFieldUISlotsFromContext, PickerFieldUISlotPropsFromContext } from "../../components/PickerFieldUI.js";
+import type { PickerStep } from "../../utils/createNonRangePickerStepNavigation.js";
 export interface UseDesktopPickerSlots extends Pick<PickerPopperSlots, 'desktopPaper' | 'desktopTransition' | 'desktopTrapFocus' | 'popper'>, ExportedPickersLayoutSlots<PickerValue>, PickerFieldUISlotsFromContext {
   /**
    * Component used to enter the date with the keyboard.

package/internals/hooks/useField/buildSectionsFromFormat.d.mts

@@ -1,5 +1,5 @@
-import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.mjs";
-import { PickersLocaleText } from "../../../locales/index.mjs";
+import type { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.mjs";
+import type { PickersLocaleText } from "../../../locales/index.mjs";
 interface BuildSectionsFromFormatParameters {
   adapter: MuiPickersAdapter;
   format: string;

package/internals/hooks/useField/buildSectionsFromFormat.d.ts

@@ -1,5 +1,5 @@
-import { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
-import { PickersLocaleText } from "../../../locales/index.js";
+import type { FieldSection, MuiPickersAdapter, PickerValidDate } from "../../../models/index.js";
+import type { PickersLocaleText } from "../../../locales/index.js";
 interface BuildSectionsFromFormatParameters {
   adapter: MuiPickersAdapter;
   format: string;

package/internals/hooks/useField/syncSelectionToDOM.d.mts

@@ -1,6 +1,6 @@
-import { PickerValidValue } from "../../models/index.mjs";
-import { UseFieldDOMGetters } from "./useField.types.mjs";
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { PickerValidValue } from "../../models/index.mjs";
+import type { UseFieldDOMGetters } from "./useField.types.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
 export declare function syncSelectionToDOM<TValue extends PickerValidValue>(parameters: SyncSelectionToDOMParameters<TValue>): void;
 export interface SyncSelectionToDOMParameters<TValue extends PickerValidValue> {
   domGetters: UseFieldDOMGetters;

package/internals/hooks/useField/syncSelectionToDOM.d.ts

@@ -1,6 +1,6 @@
-import { PickerValidValue } from "../../models/index.js";
-import { UseFieldDOMGetters } from "./useField.types.js";
-import { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { PickerValidValue } from "../../models/index.js";
+import type { UseFieldDOMGetters } from "./useField.types.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
 export declare function syncSelectionToDOM<TValue extends PickerValidValue>(parameters: SyncSelectionToDOMParameters<TValue>): void;
 export interface SyncSelectionToDOMParameters<TValue extends PickerValidValue> {
   domGetters: UseFieldDOMGetters;

package/internals/hooks/useField/useField.d.mts

@@ -1,3 +1,3 @@
-import { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.mjs";
-import { PickerValidValue } from "../../models/index.mjs";
+import type { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.mjs";
+import type { PickerValidValue } from "../../models/index.mjs";
 export declare const useField: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps>(parameters: UseFieldParameters<TValue, TError, TValidationProps, TProps>) => UseFieldReturnValue<TProps>;

package/internals/hooks/useField/useField.d.ts

@@ -1,3 +1,3 @@
-import { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.js";
-import { PickerValidValue } from "../../models/index.js";
+import type { UseFieldParameters, UseFieldProps, UseFieldReturnValue } from "./useField.types.js";
+import type { PickerValidValue } from "../../models/index.js";
 export declare const useField: <TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps>(parameters: UseFieldParameters<TValue, TError, TValidationProps, TProps>) => UseFieldReturnValue<TProps>;

package/internals/hooks/useField/useField.js

@@ -53,6 +53,7 @@ const useField = parameters => {
     sectionListRef: sectionListRefProp,
     onBlur,
     onClick,
+    onMouseDown,
     onFocus,
     onInput,
     onPaste,
@@ -167,6 +168,22 @@ const useField = parameters => {
     onClick?.(event);
     rootProps.onClick(event);
   });
+  const handleRootMouseDown = (0, _useEventCallback.default)(event => {
+    // The `isDefaultPrevented` check skips mousedowns that have already been
+    // suppressed before this handler runs -- in particular, propagated events
+    // from the clear / open buttons whose own handlers `preventDefault`, and
+    // capture-phase parents that intentionally block field interactions.
+    // Userland `onMouseDown` calling `event.preventDefault()` does *not*
+    // suppress `rootProps.onMouseDown` here: the prevent fires *after* this
+    // check, and `rootProps.onMouseDown` is the section-selection mechanism
+    // for the field -- letting consumers disable it inline would leave the
+    // field unable to focus a section on click.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onMouseDown?.(event);
+    rootProps.onMouseDown(event);
+  });
   const handleRootPaste = (0, _useEventCallback.default)(event => {
     onPaste?.(event);
     rootProps.onPaste(event);
@@ -253,6 +270,7 @@ Learn more about the field accessible DOM structure on the MUI documentation: ht
   return (0, _extends2.default)({}, forwardedProps, rootProps, {
     onBlur: handleRootBlur,
     onClick: handleRootClick,
+    onMouseDown: handleRootMouseDown,
     onFocus: handleRootFocus,
     onInput: handleRootInput,
     onPaste: handleRootPaste,

package/internals/hooks/useField/useField.mjs

@@ -46,6 +46,7 @@ export const useField = parameters => {
     sectionListRef: sectionListRefProp,
     onBlur,
     onClick,
+    onMouseDown,
     onFocus,
     onInput,
     onPaste,
@@ -160,6 +161,22 @@ export const useField = parameters => {
     onClick?.(event);
     rootProps.onClick(event);
   });
+  const handleRootMouseDown = useEventCallback(event => {
+    // The `isDefaultPrevented` check skips mousedowns that have already been
+    // suppressed before this handler runs -- in particular, propagated events
+    // from the clear / open buttons whose own handlers `preventDefault`, and
+    // capture-phase parents that intentionally block field interactions.
+    // Userland `onMouseDown` calling `event.preventDefault()` does *not*
+    // suppress `rootProps.onMouseDown` here: the prevent fires *after* this
+    // check, and `rootProps.onMouseDown` is the section-selection mechanism
+    // for the field -- letting consumers disable it inline would leave the
+    // field unable to focus a section on click.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onMouseDown?.(event);
+    rootProps.onMouseDown(event);
+  });
   const handleRootPaste = useEventCallback(event => {
     onPaste?.(event);
     rootProps.onPaste(event);
@@ -246,6 +263,7 @@ Learn more about the field accessible DOM structure on the MUI documentation: ht
   return _extends({}, forwardedProps, rootProps, {
     onBlur: handleRootBlur,
     onClick: handleRootClick,
+    onMouseDown: handleRootMouseDown,
     onFocus: handleRootFocus,
     onInput: handleRootInput,
     onPaste: handleRootPaste,

package/internals/hooks/useField/useField.types.d.mts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.mjs";
-import { InternalPropNames } from "../../../hooks/useSplitFieldProps.mjs";
+import type * as React from 'react';
+import type { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.mjs";
+import type { InternalPropNames } from "../../../hooks/useSplitFieldProps.mjs";
 import type { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.mjs";
-import { FormProps, InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "../../models/index.mjs";
+import type { FormProps, InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "../../models/index.mjs";
 export interface UseFieldParameters<TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps> {
   manager: PickerManager<TValue, TError, TValidationProps, any>;
   props: TProps;
@@ -92,6 +92,7 @@ export interface UseFieldForwardedProps {
   focused?: boolean;
   sectionListRef?: React.Ref<PickersSectionListRef>;
   onClick?: React.MouseEventHandler;
+  onMouseDown?: React.MouseEventHandler;
   onKeyDown?: React.KeyboardEventHandler;
   onFocus?: React.FocusEventHandler;
   onBlur?: React.FocusEventHandler;

package/internals/hooks/useField/useField.types.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
-import { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
+import type * as React from 'react';
+import type { FieldSectionType, FieldSection, FieldSelectedSections, MuiPickersAdapter, TimezoneProps, FieldSectionContentType, PickerValidDate, FieldRef, OnErrorProps, InferFieldSection, PickerManager, PickerValueType } from "../../../models/index.js";
+import type { InternalPropNames } from "../../../hooks/useSplitFieldProps.js";
 import type { PickersSectionElement, PickersSectionListRef } from "../../../PickersSectionList/index.js";
-import { FormProps, InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "../../models/index.js";
+import type { FormProps, InferNonNullablePickerValue, PickerRangeValue, PickerValidValue } from "../../models/index.js";
 export interface UseFieldParameters<TValue extends PickerValidValue, TError, TValidationProps extends {}, TProps extends UseFieldProps> {
   manager: PickerManager<TValue, TError, TValidationProps, any>;
   props: TProps;
@@ -92,6 +92,7 @@ export interface UseFieldForwardedProps {
   focused?: boolean;
   sectionListRef?: React.Ref<PickersSectionListRef>;
   onClick?: React.MouseEventHandler;
+  onMouseDown?: React.MouseEventHandler;
   onKeyDown?: React.KeyboardEventHandler;
   onFocus?: React.FocusEventHandler;
   onBlur?: React.FocusEventHandler;

package/internals/hooks/useField/useField.utils.d.mts

@@ -1,6 +1,6 @@
-import { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.mjs";
-import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.mjs";
-import { PickerValidValue } from "../../models/index.mjs";
+import type { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.mjs";
+import type { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.mjs";
+import type { PickerValidValue } from "../../models/index.mjs";
 export declare const getDateSectionConfigFromFormatToken: (adapter: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
   maxLength: number | undefined;
 };
@@ -30,6 +30,5 @@ export declare const createDateStrForHiddenInputFromSections: (sections: FieldSe
 export declare const getSectionsBoundaries: (adapter: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
 export declare const validateSections: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], valueType: PickerValueType) => void;
 export declare const mergeDateIntoReferenceDate: (adapter: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
-export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[]) => SectionOrdering;
 export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;

package/internals/hooks/useField/useField.utils.d.ts

@@ -1,6 +1,6 @@
-import { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
-import { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
-import { PickerValidValue } from "../../models/index.js";
+import type { FieldSectionsValueBoundaries, SectionOrdering, FieldSectionValueBoundaries, FieldParsedSelectedSections } from "./useField.types.js";
+import type { FieldSectionType, FieldSection, MuiPickersAdapter, FieldSectionContentType, PickersTimezone, PickerValidDate, FieldSelectedSections, PickerValueType, InferFieldSection } from "../../../models/index.js";
+import type { PickerValidValue } from "../../models/index.js";
 export declare const getDateSectionConfigFromFormatToken: (adapter: MuiPickersAdapter, formatToken: string) => Pick<FieldSection, "type" | "contentType"> & {
   maxLength: number | undefined;
 };
@@ -30,6 +30,5 @@ export declare const createDateStrForHiddenInputFromSections: (sections: FieldSe
 export declare const getSectionsBoundaries: (adapter: MuiPickersAdapter, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries;
 export declare const validateSections: <TValue extends PickerValidValue>(sections: InferFieldSection<TValue>[], valueType: PickerValueType) => void;
 export declare const mergeDateIntoReferenceDate: (adapter: MuiPickersAdapter, dateToTransferFrom: PickerValidDate, sections: FieldSection[], referenceDate: PickerValidDate, shouldLimitToEditedSections: boolean) => PickerValidDate;
-export declare const isAndroid: () => boolean;
 export declare const getSectionOrder: (sections: FieldSection[]) => SectionOrdering;
 export declare const parseSelectedSections: (selectedSections: FieldSelectedSections, sections: FieldSection[]) => FieldParsedSelectedSections;

package/internals/hooks/useField/useField.utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.isAndroid = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForHiddenInputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
+exports.validateSections = exports.removeLocalizedDigits = exports.parseSelectedSections = exports.mergeDateIntoReferenceDate = exports.isStringNumber = exports.getSectionsBoundaries = exports.getSectionVisibleValue = exports.getSectionOrder = exports.getLocalizedDigits = exports.getLetterEditingOptions = exports.getDaysInWeekStr = exports.getDateSectionConfigFromFormatToken = exports.getDateFromDateSections = exports.doesSectionFormatHaveLeadingZeros = exports.createDateStrForHiddenInputFromSections = exports.cleanLeadingZeros = exports.cleanDigitSectionValue = exports.changeSectionValueFormat = exports.applyLocalizedDigits = exports.FORMAT_SECONDS_NO_LEADING_ZEROS = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _dateUtils = require("../../utils/date-utils");
 var _timeUtils = require("../../utils/time-utils");
@@ -452,8 +452,6 @@ const mergeDateIntoReferenceDate = (adapter, dateToTransferFrom, sections, refer
   return mergedDate;
 }, referenceDate);
 exports.mergeDateIntoReferenceDate = mergeDateIntoReferenceDate;
-const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
-exports.isAndroid = isAndroid;
 const getSectionOrder = sections => {
   const neighbors = {};
   sections.forEach((_, index) => {

package/internals/hooks/useField/useField.utils.mjs

@@ -428,7 +428,6 @@ export const mergeDateIntoReferenceDate = (adapter, dateToTransferFrom, sections
   }
   return mergedDate;
 }, referenceDate);
-export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
 export const getSectionOrder = sections => {
   const neighbors = {};
   sections.forEach((_, index) => {

package/internals/hooks/useField/useFieldCharacterEditing.d.mts

@@ -1,5 +1,5 @@
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
-import { PickerValidValue } from "../../models/index.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { PickerValidValue } from "../../models/index.mjs";
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
  * This hook has two main editing behaviors

package/internals/hooks/useField/useFieldCharacterEditing.d.ts

@@ -1,5 +1,5 @@
-import { UseFieldStateReturnValue } from "./useFieldState.js";
-import { PickerValidValue } from "../../models/index.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { PickerValidValue } from "../../models/index.js";
 /**
  * Update the active section value when the user pressed a key that is not a navigation key (arrow key for example).
  * This hook has two main editing behaviors

package/internals/hooks/useField/useFieldHiddenInputProps.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PickerAnyManager } from "../../models/manager.mjs";
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { PickerAnyManager } from "../../models/manager.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
 /**
  * Generate the props to pass to the hidden input element of the field.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldHiddenInputProps.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PickerAnyManager } from "../../models/manager.js";
-import { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { PickerAnyManager } from "../../models/manager.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
 /**
  * Generate the props to pass to the hidden input element of the field.
  * @param {UseFieldHiddenInputPropsParameters} parameters The parameters of the hook.

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.mts

@@ -1,4 +1,4 @@
-import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.mjs";
+import type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.mjs";
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.

package/internals/hooks/useField/useFieldInternalPropsWithDefaults.d.ts

@@ -1,4 +1,4 @@
-import { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
+import type { PickerAnyManager, PickerManagerFieldInternalProps, PickerManagerFieldInternalPropsWithDefaults } from "../../models/index.js";
 /**
  * Applies the default values to the field internal props.
  * This is a temporary hook that will be removed during a follow up when `useField` will receive the internal props without the defaults.

package/internals/hooks/useField/useFieldRootProps.d.mts

@@ -1,7 +1,7 @@
-import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
-import { UseFieldStateReturnValue } from "./useFieldState.mjs";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
-import { PickerAnyManager } from "../../models/index.mjs";
+import type { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.mjs";
+import type { UseFieldStateReturnValue } from "./useFieldState.mjs";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.mjs";
+import type { PickerAnyManager } from "../../models/index.mjs";
 /**
  * Generate the props to pass to the root element of the field.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
@@ -24,6 +24,7 @@ interface UseFieldRootPropsReturnValue {
   onBlur: React.FocusEventHandler<HTMLDivElement>;
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   contentEditable: boolean;

package/internals/hooks/useField/useFieldRootProps.d.ts

@@ -1,7 +1,7 @@
-import { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
-import { UseFieldStateReturnValue } from "./useFieldState.js";
-import { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
-import { PickerAnyManager } from "../../models/index.js";
+import type { UseFieldDOMGetters, UseFieldInternalProps } from "./useField.types.js";
+import type { UseFieldStateReturnValue } from "./useFieldState.js";
+import type { UseFieldCharacterEditingReturnValue } from "./useFieldCharacterEditing.js";
+import type { PickerAnyManager } from "../../models/index.js";
 /**
  * Generate the props to pass to the root element of the field.
  * @param {UseFieldRootPropsParameters} parameters The parameters of the hook.
@@ -24,6 +24,7 @@ interface UseFieldRootPropsReturnValue {
   onBlur: React.FocusEventHandler<HTMLDivElement>;
   onFocus: React.FocusEventHandler<HTMLDivElement>;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   contentEditable: boolean;

package/internals/hooks/useField/useFieldRootProps.js

@@ -144,14 +144,22 @@ function useFieldRootProps(parameters) {
     }
   });
   const containerClickTimeout = (0, _useTimeout.default)();
-  const handleClick = (0, _useEventCallback.default)(event => {
+  const handleClick = (0, _useEventCallback.default)(() => {
     if (disabled || !domGetters.isReady()) {
       return;
     }
-    setFocused(true);
     if (parsedSelectedSections === 'all') {
+      setFocused(true);
       containerClickTimeout.start(0, () => {
-        const cursorPosition = document.getSelection().getRangeAt(0).startOffset;
+        // `getSelection`/`getRangeAt` can be unset transiently (e.g. focus
+        // moved before this 0-tick callback ran). Fall back to the first
+        // section in that case.
+        const selection = document.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+          setSelectedSections(sectionOrder.startIndex);
+          return;
+        }
+        const cursorPosition = selection.getRangeAt(0).startOffset;
         if (cursorPosition === 0) {
           setSelectedSections(sectionOrder.startIndex);
           return;
@@ -165,16 +173,70 @@ function useFieldRootProps(parameters) {
         }
         setSelectedSections(sectionIndex - 1);
       });
-    } else if (!focused) {
+      return;
+    }
+
+    // For trusted pointer input, `handleMouseDown` already ran and set the
+    // section. This branch only matters for `click` events that arrive
+    // without a preceding `mousedown` (programmatic `element.click()`, some
+    // assistive-technology activations, synthetic event sequences in tests).
+    // Fall back to the first section so the field doesn't enter a "focused
+    // but no active section" state.
+    if (!focused) {
       setFocused(true);
-      setSelectedSections(sectionOrder.startIndex);
-    } else {
-      const hasClickedOnASection = domGetters.getRoot().contains(event.target);
-      if (!hasClickedOnASection) {
+      if (parsedSelectedSections == null) {
         setSelectedSections(sectionOrder.startIndex);
       }
     }
   });
+
+  // Replaces Chromium's focus delegation with an explicit section focus on
+  // every primary mousedown inside the sections container. The CSS gate
+  // (`WebkitUserModify: read-only` while not `:focus-within`) can make the
+  // section's contenteditable span temporarily non-focusable, in which case
+  // Chromium falls back to the sections-container `tabindex=0` and our
+  // `handleFocus` then runs the "no active section" fallback, briefly
+  // selecting the first section before the click bubble corrects it.
+  // Setting the target section here (and letting `syncSelectionToDOM` move
+  // focus via `.focus()`, which works even with the user-modify rule
+  // active) skips that race entirely.
+  const handleMouseDown = (0, _useEventCallback.default)(event => {
+    if (disabled || !domGetters.isReady() || parsedSelectedSections === 'all') {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    // `sectionListRoot` is the sections container (a descendant of the
+    // InputBase root that owns this handler). The guard rejects clicks on
+    // sibling adornments (open / clear buttons, etc.) which have their own
+    // behavior and must not get intercepted here.
+    const sectionListRoot = domGetters.getRoot();
+    if (!sectionListRoot.contains(target)) {
+      return;
+    }
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for padding / past-last-section clicks.
+    const sectionElement = target.closest('[data-sectionindex]');
+    const parsedIndex = sectionElement ? Number(sectionElement.dataset.sectionindex) : findClosestSectionIndexToPoint(sectionListRoot, event.clientX);
+    // `Number(undefined) === NaN` and `NaN == null === false`, so guard
+    // explicitly here even though `data-sectionindex` is set by
+    // `useFieldSectionContainerProps` for every section in practice.
+    if (parsedIndex == null || !Number.isInteger(parsedIndex)) {
+      return;
+    }
+    event.preventDefault();
+    setFocused(true);
+    // `mousedown` is now authoritative for pointer section selection. The
+    // section container's own `onClick` deduplicates against the resulting
+    // `parsedSelectedSections` on the click bubble (see
+    // `useFieldSectionContainerProps`), so we always select here and let that
+    // guard absorb the redundant call -- matching the pre-PR
+    // `onSelectedSectionsChange` invocation count.
+    setSelectedSections(parsedIndex);
+  });
   const handleInput = (0, _useEventCallback.default)(event => {
     if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
       return;
@@ -242,6 +304,7 @@ function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
@@ -249,6 +312,30 @@ function useFieldRootProps(parameters) {
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
 }
+
+/**
+ * Returns the index of the section whose horizontal center is closest to `clientX`.
+ * Returns `null` if the field renders no `[role="spinbutton"]` descendants
+ * (defensive — every section content span sets `role="spinbutton"` in practice).
+ */
+function findClosestSectionIndexToPoint(root, clientX) {
+  const sections = root.querySelectorAll('[role="spinbutton"]');
+  if (sections.length === 0) {
+    return null;
+  }
+  let closestIndex = 0;
+  let closestDistance = Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    const center = (rect.left + rect.right) / 2;
+    const distance = Math.abs(clientX - center);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = i;
+    }
+  }
+  return closestIndex;
+}
 function getDeltaFromKeyCode(keyCode) {
   switch (keyCode) {
     case 'ArrowUp':