@mui/x-date-pickers 8.29.2 → 8.29.3

package/CHANGELOG.md

@@ -5,6 +5,78 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.29.3
+
+_Aug 21, 2026_
+
+We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@LukasTy, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.29.3`
+
+- [DataGrid] Fix toolbar button stealing focus when a sibling's disabled state changes (#23265) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.29.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.29.3`.
+
+#### `@mui/x-data-grid-premium@8.29.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.29.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.29.3`
+
+- [fields] Keep the field editable on blank space clicks (#23372) @LukasTy
+- [pickers] Fix format placeholder brightness with a start adornment (#23205) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.29.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.29.3`, plus:
+
+- [DateRangePicker] Fix broken active range position underline in single input range fields (#23201) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@8.29.3`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.29.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.29.3`.
+
+#### `@mui/x-charts-premium@8.29.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.29.3`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.29.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.29.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.29.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.29.3`
+
+Internal changes.
+
+### Miscellaneous
+
+- [core] Fix `test-react-18` install failure on v8.x (#23202) @LukasTy
+
 ## 8.29.2
 
 _Jul 2, 2026_

package/PickersTextField/PickersFilledInput/PickersFilledInput.js

@@ -279,6 +279,7 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
   onClick: _propTypes.default.func.isRequired,
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
+  onMouseDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
   ownerState: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   readOnly: _propTypes.default.bool,

package/PickersTextField/PickersFilledInput/PickersFilledInput.mjs

@@ -272,6 +272,7 @@ process.env.NODE_ENV !== "production" ? PickersFilledInput.propTypes = {
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onKeyDown: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
   onPaste: PropTypes.func.isRequired,
   ownerState: PropTypes /* @typescript-to-proptypes-ignore */.any,
   readOnly: PropTypes.bool,

package/PickersTextField/PickersInput/PickersInput.js

@@ -197,6 +197,7 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
   onClick: _propTypes.default.func.isRequired,
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
+  onMouseDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
   ownerState: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   readOnly: _propTypes.default.bool,

package/PickersTextField/PickersInput/PickersInput.mjs

@@ -190,6 +190,7 @@ process.env.NODE_ENV !== "production" ? PickersInput.propTypes = {
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onKeyDown: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
   onPaste: PropTypes.func.isRequired,
   ownerState: PropTypes /* @typescript-to-proptypes-ignore */.any,
   readOnly: PropTypes.bool,

package/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -88,39 +88,28 @@ const PickersInputBaseSectionsContainer = exports.PickersInputBaseSectionsContai
       paddingTop: 1
     }
   }, {
+    // While the field is empty and blurred, the format is shown as a placeholder.
     props: {
-      hasStartAdornment: false,
       isFieldFocused: false,
       isFieldValueEmpty: true
     },
-    style: {
-      color: 'currentColor',
-      opacity: 0
-    }
-  }, {
-    props: {
-      hasStartAdornment: false,
-      isFieldFocused: false,
-      isFieldValueEmpty: true,
-      inputHasLabel: false
-    },
     style: theme.vars ? {
       opacity: theme.vars.opacity.inputPlaceholder
     } : {
       opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
     }
   }, {
+    // ...except when a non-shrunk label sits in the notch, where the format would overlap it.
+    // A start adornment always shrinks the label, so it never triggers this case.
     props: {
-      hasStartAdornment: false,
       isFieldFocused: false,
       isFieldValueEmpty: true,
+      hasStartAdornment: false,
       inputHasLabel: true,
-      isLabelShrunk: true
+      isLabelShrunk: false
     },
-    style: theme.vars ? {
-      opacity: theme.vars.opacity.inputPlaceholder
-    } : {
-      opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
+    style: {
+      opacity: 0
     }
   }]
 }));
@@ -150,7 +139,16 @@ const PickersInputBaseSectionContent = (0, _styles.styled)(_PickersSectionList.U
   // 23px
   letterSpacing: 'inherit',
   width: 'fit-content',
-  outline: 'none'
+  outline: 'none',
+  // Disables Chromium's focus-delegation onto contenteditable descendants
+  // while the field is not focused. Gated to Chromium via a Blink-only
+  // property, because the rule breaks Playwright's `fill()` on WebKit.
+  '@supports (-webkit-app-region: drag)': {
+    [`.${_pickersInputBaseClasses.pickersInputBaseClasses.root}:not(:focus-within) &`]: {
+      WebkitUserModify: 'read-only',
+      userSelect: 'none'
+    }
+  }
 }));
 const PickersInputBaseSectionSeparator = (0, _styles.styled)(_PickersSectionList.Unstable_PickersSectionListSectionSeparator, {
   name: 'MuiPickersInputBase',
@@ -216,7 +214,8 @@ const useUtilityClasses = (classes, ownerState) => {
   return (0, _composeClasses.default)(slots, _pickersInputBaseClasses.getPickersInputBaseUtilityClass, classes);
 };
 function resolveSectionElementWidth(sectionElement, rootRef, index, dateRangePosition) {
-  if (sectionElement.content.id) {
+  // Only measure sections that belong to a range date.
+  if (sectionElement.content['data-range-position'] !== undefined) {
     const activeSectionElements = rootRef.current?.querySelectorAll(`[data-sectionindex="${index}"] [data-range-position="${dateRangePosition}"]`);
     if (activeSectionElements) {
       return Array.from(activeSectionElements).reduce((currentActiveBarWidth, element) => {
@@ -461,6 +460,7 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
   onClick: _propTypes.default.func.isRequired,
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
+  onMouseDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
   ownerState: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   readOnly: _propTypes.default.bool,

package/PickersTextField/PickersInputBase/PickersInputBase.mjs

@@ -81,39 +81,28 @@ export const PickersInputBaseSectionsContainer = styled(PickersSectionListRoot,
       paddingTop: 1
     }
   }, {
+    // While the field is empty and blurred, the format is shown as a placeholder.
     props: {
-      hasStartAdornment: false,
       isFieldFocused: false,
       isFieldValueEmpty: true
     },
-    style: {
-      color: 'currentColor',
-      opacity: 0
-    }
-  }, {
-    props: {
-      hasStartAdornment: false,
-      isFieldFocused: false,
-      isFieldValueEmpty: true,
-      inputHasLabel: false
-    },
     style: theme.vars ? {
       opacity: theme.vars.opacity.inputPlaceholder
     } : {
       opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
     }
   }, {
+    // ...except when a non-shrunk label sits in the notch, where the format would overlap it.
+    // A start adornment always shrinks the label, so it never triggers this case.
     props: {
-      hasStartAdornment: false,
       isFieldFocused: false,
       isFieldValueEmpty: true,
+      hasStartAdornment: false,
       inputHasLabel: true,
-      isLabelShrunk: true
+      isLabelShrunk: false
     },
-    style: theme.vars ? {
-      opacity: theme.vars.opacity.inputPlaceholder
-    } : {
-      opacity: theme.palette.mode === 'light' ? 0.42 : 0.5
+    style: {
+      opacity: 0
     }
   }]
 }));
@@ -143,7 +132,16 @@ const PickersInputBaseSectionContent = styled(PickersSectionListSectionContent,
   // 23px
   letterSpacing: 'inherit',
   width: 'fit-content',
-  outline: 'none'
+  outline: 'none',
+  // Disables Chromium's focus-delegation onto contenteditable descendants
+  // while the field is not focused. Gated to Chromium via a Blink-only
+  // property, because the rule breaks Playwright's `fill()` on WebKit.
+  '@supports (-webkit-app-region: drag)': {
+    [`.${pickersInputBaseClasses.root}:not(:focus-within) &`]: {
+      WebkitUserModify: 'read-only',
+      userSelect: 'none'
+    }
+  }
 }));
 const PickersInputBaseSectionSeparator = styled(PickersSectionListSectionSeparator, {
   name: 'MuiPickersInputBase',
@@ -209,7 +207,8 @@ const useUtilityClasses = (classes, ownerState) => {
   return composeClasses(slots, getPickersInputBaseUtilityClass, classes);
 };
 function resolveSectionElementWidth(sectionElement, rootRef, index, dateRangePosition) {
-  if (sectionElement.content.id) {
+  // Only measure sections that belong to a range date.
+  if (sectionElement.content['data-range-position'] !== undefined) {
     const activeSectionElements = rootRef.current?.querySelectorAll(`[data-sectionindex="${index}"] [data-range-position="${dateRangePosition}"]`);
     if (activeSectionElements) {
       return Array.from(activeSectionElements).reduce((currentActiveBarWidth, element) => {
@@ -454,6 +453,7 @@ process.env.NODE_ENV !== "production" ? PickersInputBase.propTypes = {
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onKeyDown: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
   onPaste: PropTypes.func.isRequired,
   ownerState: PropTypes /* @typescript-to-proptypes-ignore */.any,
   readOnly: PropTypes.bool,

package/PickersTextField/PickersInputBase/PickersInputBase.types.d.mts

@@ -11,6 +11,7 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
    */
   areAllSectionsEmpty: boolean;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;

package/PickersTextField/PickersInputBase/PickersInputBase.types.d.ts

@@ -11,6 +11,7 @@ export interface PickersInputPropsUsedByField extends Pick<PickersSectionListPro
    */
   areAllSectionsEmpty: boolean;
   onClick: React.MouseEventHandler<HTMLDivElement>;
+  onMouseDown: React.MouseEventHandler<HTMLDivElement>;
   onKeyDown: React.EventHandler<MuiEvent<React.KeyboardEvent<HTMLDivElement>>>;
   onInput: React.FormEventHandler<HTMLDivElement>;
   onPaste: React.ClipboardEventHandler<HTMLDivElement>;

package/PickersTextField/PickersInputBase/pickersInputBaseClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getPickersInputBaseUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPickersInputBase', slot);
 }
-const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);
+const pickersInputBaseClasses = exports.pickersInputBaseClasses = (0, _generateUtilityClasses.default)('MuiPickersInputBase', ['root', 'focused', 'disabled', 'readOnly', 'error', 'notchedOutline', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);

package/PickersTextField/PickersInputBase/pickersInputBaseClasses.mjs

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPickersInputBaseUtilityClass(slot) {
   return generateUtilityClass('MuiPickersInputBase', slot);
 }
-export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'error', 'notchedOutline', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);
+export const pickersInputBaseClasses = generateUtilityClasses('MuiPickersInputBase', ['root', 'focused', 'disabled', 'readOnly', 'error', 'notchedOutline', 'sectionsContainer', 'sectionContent', 'sectionBefore', 'sectionAfter', 'adornedStart', 'adornedEnd', 'input', 'inputSizeSmall', 'activeBar']);

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -172,6 +172,7 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
   onClick: _propTypes.default.func.isRequired,
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
+  onMouseDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
   ownerState: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   readOnly: _propTypes.default.bool,

package/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.mjs

@@ -165,6 +165,7 @@ process.env.NODE_ENV !== "production" ? PickersOutlinedInput.propTypes = {
   onClick: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onKeyDown: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
   onPaste: PropTypes.func.isRequired,
   ownerState: PropTypes /* @typescript-to-proptypes-ignore */.any,
   readOnly: PropTypes.bool,

package/PickersTextField/PickersTextField.js

@@ -27,7 +27,7 @@ var _PickersInput = require("./PickersInput");
 var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
 var _usePickerTextFieldOwnerState = require("./usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onMouseDown", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
 const VARIANT_COMPONENT = {
   standard: _PickersInput.PickersInput,
   filled: _PickersFilledInput.PickersFilledInput,
@@ -75,6 +75,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       elements,
       areAllSectionsEmpty,
       onClick,
+      onMouseDown,
       onKeyDown,
       onKeyUp,
       onPaste,
@@ -155,6 +156,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
         elements: elements,
         areAllSectionsEmpty: areAllSectionsEmpty,
         onClick: onClick,
+        onMouseDown: onMouseDown,
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         onInput: onInput,
@@ -267,6 +269,7 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
   onFocus: _propTypes.default.func.isRequired,
   onInput: _propTypes.default.func.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
+  onMouseDown: _propTypes.default.func.isRequired,
   onPaste: _propTypes.default.func.isRequired,
   readOnly: _propTypes.default.bool,
   /**

package/PickersTextField/PickersTextField.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onMouseDown", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -68,6 +68,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       elements,
       areAllSectionsEmpty,
       onClick,
+      onMouseDown,
       onKeyDown,
       onKeyUp,
       onPaste,
@@ -148,6 +149,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         elements: elements,
         areAllSectionsEmpty: areAllSectionsEmpty,
         onClick: onClick,
+        onMouseDown: onMouseDown,
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         onInput: onInput,
@@ -260,6 +262,7 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
   onFocus: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onKeyDown: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
   onPaste: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
   /**

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.29.2
+ * @mui/x-date-pickers v8.29.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v8.29.2
+ * @mui/x-date-pickers v8.29.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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

@@ -107,6 +107,7 @@ export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends bo
   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

@@ -107,6 +107,7 @@ export type UseFieldForwardedProps<TEnableAccessibleFieldDOMStructure extends bo
   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/useFieldRootProps.d.mts

@@ -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

@@ -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

@@ -50,14 +50,22 @@ function useFieldRootProps(parameters) {
     stateResponse
   });
   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;
@@ -71,15 +79,83 @@ 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;
+    const sectionListRoot = domGetters.getRoot();
+    const isInsideSectionList = sectionListRoot.contains(target);
+    // Only the field root is ours outside the sections container: it is the
+    // target of a padding click. The adornments keep their own behavior.
+    if (!isInsideSectionList && target !== event.currentTarget) {
+      return;
+    }
+    const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
+
+    // Blank space is the field padding and the area past the sections. Mimic
+    // the native date input: first section on entry, keep it afterwards.
+    // `preventDefault` is what keeps it, by stopping both the browser blur and
+    // Chromium's focus delegation.
+    const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
+    if (isBlankSpaceClick) {
+      event.preventDefault();
+      if (!focused) {
+        setFocused(true);
         setSelectedSections(sectionOrder.startIndex);
       }
+      return;
     }
+
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for clicks on the container padding.
+    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') {
@@ -148,10 +224,61 @@ function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
     contentEditable: parsedSelectedSections === 'all',
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
+}
+
+/**
+ * Slop on each side of the sections, so a click that just misses the outermost
+ * one still selects it. Under half a digit at the default font size.
+ */
+const BLANK_SPACE_TOLERANCE = 4;
+
+/**
+ * Returns `true` when `clientX` sits past the sections on either side.
+ * Horizontal only: a click in the container's vertical padding still belongs to
+ * the section above or below it.
+ */
+function isPointOutsideSections(root, clientX) {
+  const sections = root.querySelectorAll('[data-sectionindex]');
+  if (sections.length === 0) {
+    return false;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+  }
+  return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
+}
+
+/**
+ * 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;
 }

package/internals/hooks/useField/useFieldRootProps.mjs

@@ -44,14 +44,22 @@ export function useFieldRootProps(parameters) {
     stateResponse
   });
   const containerClickTimeout = useTimeout();
-  const handleClick = useEventCallback(event => {
+  const handleClick = useEventCallback(() => {
     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;
@@ -65,15 +73,83 @@ export 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 = useEventCallback(event => {
+    if (disabled || !domGetters.isReady() || parsedSelectedSections === 'all') {
+      return;
+    }
+    if (event.button !== 0) {
+      return;
+    }
+    const target = event.target;
+    const sectionListRoot = domGetters.getRoot();
+    const isInsideSectionList = sectionListRoot.contains(target);
+    // Only the field root is ours outside the sections container: it is the
+    // target of a padding click. The adornments keep their own behavior.
+    if (!isInsideSectionList && target !== event.currentTarget) {
+      return;
+    }
+    const sectionElement = isInsideSectionList ? target.closest('[data-sectionindex]') : null;
+
+    // Blank space is the field padding and the area past the sections. Mimic
+    // the native date input: first section on entry, keep it afterwards.
+    // `preventDefault` is what keeps it, by stopping both the browser blur and
+    // Chromium's focus delegation.
+    const isBlankSpaceClick = sectionElement == null && (!isInsideSectionList || isPointOutsideSections(sectionListRoot, event.clientX));
+    if (isBlankSpaceClick) {
+      event.preventDefault();
+      if (!focused) {
+        setFocused(true);
         setSelectedSections(sectionOrder.startIndex);
       }
+      return;
     }
+
+    // Prefer the visually-containing section (matches Chromium's
+    // delegation + section container `onClick`), fall back to the
+    // closest-by-distance section for clicks on the container padding.
+    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 = useEventCallback(event => {
     if (!domGetters.isReady() || parsedSelectedSections !== 'all') {
@@ -142,10 +218,61 @@ export function useFieldRootProps(parameters) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     onClick: handleClick,
+    onMouseDown: handleMouseDown,
     onPaste: handlePaste,
     onInput: handleInput,
     // Other
     contentEditable: parsedSelectedSections === 'all',
     tabIndex: internalPropsWithDefaults.disabled || parsedSelectedSections === 0 ? -1 : 0 // TODO: Try to set to undefined when there is a section selected.
   };
+}
+
+/**
+ * Slop on each side of the sections, so a click that just misses the outermost
+ * one still selects it. Under half a digit at the default font size.
+ */
+const BLANK_SPACE_TOLERANCE = 4;
+
+/**
+ * Returns `true` when `clientX` sits past the sections on either side.
+ * Horizontal only: a click in the container's vertical padding still belongs to
+ * the section above or below it.
+ */
+function isPointOutsideSections(root, clientX) {
+  const sections = root.querySelectorAll('[data-sectionindex]');
+  if (sections.length === 0) {
+    return false;
+  }
+  let left = Infinity;
+  let right = -Infinity;
+  for (let i = 0; i < sections.length; i += 1) {
+    const rect = sections[i].getBoundingClientRect();
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+  }
+  return clientX < left - BLANK_SPACE_TOLERANCE || clientX > right + BLANK_SPACE_TOLERANCE;
+}
+
+/**
+ * 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;
 }

package/internals/hooks/useField/useFieldSectionContainerProps.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useFieldSectionContainerProps = useFieldSectionContainerProps;
 var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -16,6 +18,8 @@ var React = _interopRequireWildcard(require("react"));
 function useFieldSectionContainerProps(parameters) {
   const {
     stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
       // Methods to update the states
       setSelectedSections
     },
@@ -23,16 +27,31 @@ function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = React.useCallback(sectionIndex => event => {
+
+  // A single stable handler shared by every section, rather than a per-index
+  // factory. The section index is read from the container's `data-sectionindex`
+  // at click time.
+  const handleClick = (0, _useEventCallback.default)(event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
     if (disabled || event.isDefaultPrevented()) {
       return;
     }
+    const sectionIndex = Number(event.currentTarget.dataset.sectionindex);
+    if (!Number.isInteger(sectionIndex)) {
+      return;
+    }
+
+    // For pointer input the `mousedown` handler already selected the section
+    // before this click bubbles, so bail to avoid a redundant
+    // `onSelectedSectionsChange` invocation.
+    if (parsedSelectedSections === sectionIndex) {
+      return;
+    }
     setSelectedSections(sectionIndex);
-  }, [disabled, setSelectedSections]);
+  });
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
-    onClick: createHandleClick(sectionIndex)
-  }), [createHandleClick]);
+    onClick: handleClick
+  }), [handleClick]);
 }

package/internals/hooks/useField/useFieldSectionContainerProps.mjs

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 /**
  * Generate the props to pass to the container element of each section of the field.
  * It is not used by the non-accessible DOM structure (with an <input /> element for editing).
@@ -9,6 +10,8 @@ import * as React from 'react';
 export function useFieldSectionContainerProps(parameters) {
   const {
     stateResponse: {
+      // States and derived states
+      parsedSelectedSections,
       // Methods to update the states
       setSelectedSections
     },
@@ -16,16 +19,31 @@ export function useFieldSectionContainerProps(parameters) {
       disabled = false
     }
   } = parameters;
-  const createHandleClick = React.useCallback(sectionIndex => event => {
+
+  // A single stable handler shared by every section, rather than a per-index
+  // factory. The section index is read from the container's `data-sectionindex`
+  // at click time.
+  const handleClick = useEventCallback(event => {
     // The click event on the clear button would propagate to the input, trigger this handler and result in a wrong section selection.
     // We avoid this by checking if the call to this function is actually intended, or a side effect.
     if (disabled || event.isDefaultPrevented()) {
       return;
     }
+    const sectionIndex = Number(event.currentTarget.dataset.sectionindex);
+    if (!Number.isInteger(sectionIndex)) {
+      return;
+    }
+
+    // For pointer input the `mousedown` handler already selected the section
+    // before this click bubbles, so bail to avoid a redundant
+    // `onSelectedSectionsChange` invocation.
+    if (parsedSelectedSections === sectionIndex) {
+      return;
+    }
     setSelectedSections(sectionIndex);
-  }, [disabled, setSelectedSections]);
+  });
   return React.useCallback(sectionIndex => ({
     'data-sectionindex': sectionIndex,
-    onClick: createHandleClick(sectionIndex)
-  }), [createHandleClick]);
+    onClick: handleClick
+  }), [handleClick]);
 }

package/internals/hooks/useField/useFieldV7TextField.js

@@ -46,6 +46,7 @@ const useFieldV7TextField = parameters => {
     sectionListRef: sectionListRefProp,
     onBlur,
     onClick,
+    onMouseDown,
     onFocus,
     onInput,
     onPaste,
@@ -147,6 +148,17 @@ const useFieldV7TextField = 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.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onMouseDown?.(event);
+    rootProps.onMouseDown(event);
+  });
   const handleRootPaste = (0, _useEventCallback.default)(event => {
     onPaste?.(event);
     rootProps.onPaste(event);
@@ -229,6 +241,7 @@ const useFieldV7TextField = parameters => {
   return (0, _extends2.default)({}, forwardedProps, rootProps, {
     onBlur: handleRootBlur,
     onClick: handleRootClick,
+    onMouseDown: handleRootMouseDown,
     onFocus: handleRootFocus,
     onInput: handleRootInput,
     onPaste: handleRootPaste,

package/internals/hooks/useField/useFieldV7TextField.mjs

@@ -39,6 +39,7 @@ export const useFieldV7TextField = parameters => {
     sectionListRef: sectionListRefProp,
     onBlur,
     onClick,
+    onMouseDown,
     onFocus,
     onInput,
     onPaste,
@@ -140,6 +141,17 @@ export const useFieldV7TextField = 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.
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    onMouseDown?.(event);
+    rootProps.onMouseDown(event);
+  });
   const handleRootPaste = useEventCallback(event => {
     onPaste?.(event);
     rootProps.onPaste(event);
@@ -222,6 +234,7 @@ export const useFieldV7TextField = parameters => {
   return _extends({}, forwardedProps, rootProps, {
     onBlur: handleRootBlur,
     onClick: handleRootClick,
+    onMouseDown: handleRootMouseDown,
     onFocus: handleRootFocus,
     onInput: handleRootInput,
     onPaste: handleRootPaste,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-date-pickers",
-  "version": "8.29.2",
+  "version": "8.29.3",
   "author": "MUI Team",
   "description": "The community edition of the MUI X Date and Time Picker components.",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.29.2"
+    "@mui/x-internals": "8.29.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",