[pickers] Clean autoFocus behavior on fields and new pickers (mui#7153

)

docs/pages/x/api/date-pickers/desktop-next-date-picker.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {
       "type": { "name": "bool" },

docs/pages/x/api/date-pickers/desktop-next-date-time-picker.json

@@ -2,6 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "ampmInClock": { "type": { "name": "bool" } },
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {
       "type": { "name": "bool" },

docs/pages/x/api/date-pickers/desktop-next-time-picker.json

@@ -2,6 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "ampmInClock": { "type": { "name": "bool" } },
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {
       "type": { "name": "bool" },

docs/pages/x/api/date-pickers/next-date-picker.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {
       "type": { "name": "bool" },

docs/pages/x/api/date-pickers/next-date-time-picker.json

@@ -2,6 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "ampmInClock": { "type": { "name": "bool" } },
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {
       "type": { "name": "bool" },

docs/pages/x/api/date-pickers/next-time-picker.json

@@ -2,6 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "ampmInClock": { "type": { "name": "bool" } },
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "closeOnSelect": {
       "type": { "name": "bool" },

docs/pages/x/api/date-pickers/static-next-date-picker.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },

docs/pages/x/api/date-pickers/static-next-date-time-picker.json

@@ -2,6 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "ampmInClock": { "type": { "name": "bool" } },
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },

docs/pages/x/api/date-pickers/static-next-time-picker.json

@@ -2,6 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "`utils.is12HourCycleInCurrentLocale()`" },
     "ampmInClock": { "type": { "name": "bool" } },
+    "autoFocus": { "type": { "name": "bool" } },
     "className": { "type": { "name": "string" } },
     "components": { "type": { "name": "object" }, "default": "{}" },
     "componentsProps": { "type": { "name": "object" }, "default": "{}" },

docs/translations/api-docs/date-pickers/desktop-next-date-picker-pt.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-date-picker-zh.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-date-picker.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-pt.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-date-time-picker-zh.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-date-time-picker.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-time-picker-pt.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-time-picker-zh.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/desktop-next-time-picker.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-date-picker-pt.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-date-picker-zh.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-date-picker.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-date-time-picker-pt.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-date-time-picker-zh.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-date-time-picker.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-time-picker-pt.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-time-picker-zh.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/next-time-picker.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the <code>input</code> element is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "closeOnSelect": "If <code>true</code> the popup or dialog will close after submitting full date.",
     "components": "Overrideable components.",

docs/translations/api-docs/date-pickers/static-next-date-picker-pt.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-date-picker-zh.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-date-picker.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-date-time-picker-pt.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-date-time-picker-zh.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-date-time-picker.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-time-picker-pt.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-time-picker-zh.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

docs/translations/api-docs/date-pickers/static-next-time-picker.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "ampm": "12h/24h view for hour selection clock.",
     "ampmInClock": "Display ampm controls under the clock (instead of in the toolbar).",
+    "autoFocus": "If <code>true</code>, the view is focused during the first mount.",
     "className": "Class name applied to the root element.",
     "components": "Overrideable components.",
     "componentsProps": "The props used for each component slot.",

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

@@ -25,6 +25,7 @@ import {
   useUtils,
   WrapperVariantContext,
   PickerSelectionState,
+  useNow,
 } from '@mui/x-date-pickers/internals';
 import { getReleaseInfo } from '../internal/utils/releaseInfo';
 import {
@@ -149,6 +150,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>(
 ) {
   const utils = useUtils<TDate>();
   const localeText = useLocaleText<TDate>();
+  const now = useNow<TDate>();
 
   const props = useDateRangeCalendarDefaultizedProps(inProps, 'MuiDateRangeCalendar');
   const isMobile = React.useContext(WrapperVariantContext) === 'mobile';
@@ -456,6 +458,28 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>(
     [utils, calendarState.currentMonth, calendars],
   );
 
+  const focusedMonth = React.useMemo(() => {
+    if (!autoFocus) {
+      return null;
+    }
+
+    // The focus priority of the "day" view is as follows:
+    // 1. Month of the `start` date
+    // 2. Month of the `end` date
+    // 3. Month of the current date
+    // 4. First visible month
+
+    if (value[0] != null) {
+      return visibleMonths.find((month) => utils.isSameMonth(month, value[0]!));
+    }
+
+    if (value[1] != null) {
+      return visibleMonths.find((month) => utils.isSameMonth(month, value[1]!));
+    }
+
+    return visibleMonths.find((month) => utils.isSameMonth(month, now)) ?? visibleMonths[0];
+  }, [utils, value, visibleMonths, autoFocus, now]);
+
   return (
     <DateRangeCalendarRoot
       ref={ref}
@@ -521,7 +545,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>(
             renderLoading={renderLoading}
             components={componentsForDayCalendar}
             componentsProps={componentsPropsForDayCalendar}
-            autoFocus={autoFocus}
+            autoFocus={month === focusedMonth}
             fixedWeekNumber={fixedWeekNumber}
             displayWeekNumber={displayWeekNumber}
           />

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx

@@ -91,7 +91,6 @@ DateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx

@@ -126,7 +126,6 @@ DesktopDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

packages/x-date-pickers-pro/src/DesktopNextDateRangePicker/DesktopNextDateRangePicker.tsx

@@ -34,7 +34,6 @@ const DesktopNextDateRangePicker = React.forwardRef(function DesktopNextDateRang
     views: ['day'] as const,
     openTo: 'day' as const,
     showToolbar: defaultizedProps.showToolbar ?? false,
-    autoFocus: true,
     components: {
       Field: MultiInputDateRangeField,
       ...defaultizedProps.components,

packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx

@@ -139,7 +139,6 @@ MobileDateRangePicker.propTypes = {
    * @default /\dap/gi
    */
   acceptRegex: PropTypes.instanceOf(RegExp),
-  autoFocus: PropTypes.bool,
   /**
    * The number of calendars that render on **desktop**.
    * @default 2

packages/x-date-pickers-pro/src/MobileNextDateRangePicker/MobileNextDateRangePicker.tsx

@@ -34,7 +34,6 @@ const MobileNextDateRangePicker = React.forwardRef(function MobileNextDateRangeP
     views: ['day'] as const,
     openTo: 'day' as const,
     showToolbar: defaultizedProps.showToolbar ?? true,
-    autoFocus: true,
     components: {
       Field: MultiInputDateRangeField,
       ...defaultizedProps.components,