mui · LukasTy · Jan 3, 2025 · Aug 30, 2024 · Aug 30, 2024 · Aug 30, 2024
diff --git a/docs/data/date-pickers/lifecycle/lifecycle.md b/docs/data/date-pickers/lifecycle/lifecycle.md
@@ -51,9 +51,12 @@
 #### When the last view is completed
 
 When a selection in the last view is made, `onClose` will be called only if the `closeOnSelect` prop is equal to `true`.
-By default, it is set to `true` on desktop and `false` on mobile.
+The default value of `closeOnSelect` depends on the component:
 
-Here are a few examples:
+- Date Picker and Date Range Picker: `true` on desktop and `false` on mobile variants;
+- Time Picker, Date Time Picker, and Date Time Range Picker: `false` on desktop and mobile variants.
+
+  Here are a few examples:
 
 :::info
 The examples below are using the desktop and mobile variants of the pickers, but the behavior is exactly the same when using the responsive variant (`DatePicker`, `TimePicker`, ...) on a mobile or desktop environment.
@@ -75,7 +78,7 @@
   - Default `views` prop: `['year', 'day']`
   - Explicit `closeOnSelect` prop: `false`
 
-  **Behavior:** The picker won't close when selecting a day. The user will have to click on the _OK_ action to close it.
+  **Behavior:** The picker will not close when selecting a day. The user will have to click on the _OK_ action to close it.
 
   :::success
   If you want to set `closeOnSelect` to `false` on a desktop picker, you should consider enabling the action bar to allow the user to validate the value:
@@ -96,7 +99,7 @@
   - Default `views` prop: `['year', 'day']`
   - Default `closeOnSelect` prop: `false`
 
-  **Behavior:** The picker won't close when selecting a day. The user will have to click on the _OK_ action to close it.
+  **Behavior:** The picker will not close when selecting a day. The user will have to click on the _OK_ action to close it.
 
 - ```tsx
   <DesktopDatePicker views={['day', 'month', 'year']} />
@@ -112,9 +115,9 @@
   ```
 
   - Default `views` prop: `['hours', 'minutes']` (plus a `meridiem` view if the locale is in 12-hours format)
-  - Default `closeOnSelect` prop: `true`
+  - Default `closeOnSelect` prop: `false`
 
-  **Behavior:** The picker will close when selecting the minutes or meridiem (if a 12-hour clock is used).
+  **Behavior:** The picker will not close when selecting the minutes or meridiem (if a 12-hour clock is used).
 
 :::info
 You don't have to fill all the views for the picker to close automatically.
@@ -225,7 +228,10 @@
 #### When the last view is completed
 
 When a selection in the last view is made, `onAccept` will be called only if the `closeOnSelect` prop is equal to `true` and the value has been modified since the last time `onAccept` was called.
-By default, `closeOnSelect`, is set to `true` on desktop and `false` on mobile.
+The default value of `closeOnSelect` depends on the component used:
+
+- Date Picker and Date Range Picker: `true` on desktop and `false` on mobile variants;
+- Time Picker, Date Time Picker, and Date Time Range Picker: `false` on desktop and mobile variants.
 
 Here are a few examples:
 
@@ -249,7 +255,7 @@
   - Default `views` prop: `['year', 'day']`
   - Explicit `closeOnSelect` prop: `false`
 
-  **Behavior:** The picker won't call `onAccept` when selecting a value.
+  **Behavior:** The picker will not call `onAccept` when selecting a value.
 
   :::success
   If you want to set `closeOnSelect` to `false` on a desktop picker, you should consider enabling the action bar to allow the user to validate the value:

diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -344,6 +344,15 @@ This change causes a few breaking changes:
 
 - The button to render a single year is no longer wrapped in a `<div />`, the spacing are instead defined inside the `root` slot of the Year Calendar.
 
+### Update default `closeOnSelect` and Action Bar `actions` values
+
+The default value of the `closeOnSelect` prop has been updated to `false` for all Picker components, except `<DesktopDatePicker />` and `<DesktopDateRangePicker />`, which still have `closeOnSelect` set to `true`.
+
+This change goes hand in hand with the new default `actions` prop value for the `<PickersActionBar />` component.
+The default value of the `actions` prop has been updated to `['cancel', 'accept']` for all Picker components, except `<DesktopDatePicker />` and `<DesktopDateRangePicker />`.
+
+If the updated values do not fit your use case, you can [override them](/x/react-date-pickers/custom-components/#component-props).
+
 ## Slots breaking changes
 
 ### Slot: `layout`

diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json
@@ -3,10 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "dayOfWeekFormatter": {
       "type": { "name": "func" },
       "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()",

diff --git a/docs/pages/x/api/date-pickers/date-time-range-picker.json b/docs/pages/x/api/date-pickers/date-time-range-picker.json
@@ -6,10 +6,7 @@
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"
     },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "currentMonthCalendarPosition": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"

diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json
@@ -1,10 +1,7 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "true" },
     "dayOfWeekFormatter": {
       "type": { "name": "func" },
       "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()",

diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json
@@ -5,10 +5,7 @@
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "2"
     },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "true" },
     "currentMonthCalendarPosition": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json
@@ -3,10 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "dayOfWeekFormatter": {
       "type": { "name": "func" },
       "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()",

diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-range-picker.json
@@ -6,10 +6,7 @@
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"
     },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "currentMonthCalendarPosition": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"

diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json
@@ -3,10 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableFuture": { "type": { "name": "bool" }, "default": "false" },

diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json
@@ -1,10 +1,7 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "dayOfWeekFormatter": {
       "type": { "name": "func" },
       "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()",

diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json
@@ -1,10 +1,7 @@
 {
   "props": {
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "currentMonthCalendarPosition": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"

diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json
@@ -3,10 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "dayOfWeekFormatter": {
       "type": { "name": "func" },
       "default": "(date: PickerValidDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()",

diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-range-picker.json
@@ -2,10 +2,7 @@
   "props": {
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "currentMonthCalendarPosition": {
       "type": { "name": "enum", "description": "1<br>&#124;&nbsp;2<br>&#124;&nbsp;3" },
       "default": "1"

diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json
@@ -3,10 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableFuture": { "type": { "name": "bool" }, "default": "false" },

diff --git a/docs/pages/x/api/date-pickers/pickers-action-bar.json b/docs/pages/x/api/date-pickers/pickers-action-bar.json
@@ -5,7 +5,7 @@
         "name": "arrayOf",
         "description": "Array&lt;'accept'<br>&#124;&nbsp;'cancel'<br>&#124;&nbsp;'clear'<br>&#124;&nbsp;'today'&gt;"
       },
-      "default": "`['cancel', 'accept']` for mobile and `[]` for desktop"
+      "default": "`[]` for Desktop Date Picker and Desktop Date Range Picker\n- `['cancel', 'accept']` for all other Pickers"
-      "default": "`[]` for Desktop Date Picker and Desktop Date Range Picker\n- `['cancel', 'accept']` for all other Pickers"
+      "default": "`[]` for Desktop Date Picker and Desktop Date Range Picker.\n`['cancel', 'accept']` for all other Pickers."
-      "default": "`[]` for Desktop Date Picker and Desktop Date Range Picker\n- `['cancel', 'accept']` for all other Pickers"
+      "default": "`[]` for Desktop Date Picker and Desktop Date Range Picker.\n`['cancel', 'accept']` for all other Pickers."
     },
     "disableSpacing": { "type": { "name": "bool" }, "default": "false" },
     "sx": {

diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json
@@ -3,10 +3,7 @@
     "ampm": { "type": { "name": "bool" }, "default": "utils.is12HourCycleInCurrentLocale()" },
     "ampmInClock": { "type": { "name": "bool" }, "default": "true on desktop, false on mobile" },
     "autoFocus": { "type": { "name": "bool" } },
-    "closeOnSelect": {
-      "type": { "name": "bool" },
-      "default": "`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
-    },
+    "closeOnSelect": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "object" } },
     "desktopModeMediaQuery": {
       "type": { "name": "string" },

diff --git a/docs/translations/api-docs/date-pickers/date-picker/date-picker.json b/docs/translations/api-docs/date-pickers/date-picker/date-picker.json
@@ -5,7 +5,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",

diff --git a/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json b/docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json
@@ -8,7 +8,7 @@
       "description": "The number of calendars to render on <strong>desktop</strong>."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },
     "dayOfWeekFormatter": {

diff --git a/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json b/docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json
@@ -9,7 +9,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",

diff --git a/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json b/docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json
@@ -9,7 +9,7 @@
       "description": "The number of calendars to render on <strong>desktop</strong>."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },
     "dayOfWeekFormatter": {

diff --git a/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json b/docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json
@@ -5,7 +5,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",

diff --git a/...anslations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json b/...anslations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json
@@ -8,7 +8,7 @@
       "description": "The number of calendars to render on <strong>desktop</strong>."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },
     "dayOfWeekFormatter": {

diff --git a/...translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json b/...translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json
@@ -9,7 +9,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",

diff --git a/.../api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json b/.../api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json
@@ -9,7 +9,7 @@
       "description": "The number of calendars to render on <strong>desktop</strong>."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },
     "dayOfWeekFormatter": {

diff --git a/docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json b/docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json
@@ -9,7 +9,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "defaultValue": {
       "description": "The default value. Used when the component is not controlled."

diff --git a/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json b/docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json
@@ -5,7 +5,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "dayOfWeekFormatter": {
       "description": "Formats the day of week displayed in the calendar header.",

diff --git a/...translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json b/...translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json
@@ -5,7 +5,7 @@
       "description": "If <code>true</code>, the main element is focused during the first mount. This main element is: - the element chosen by the visible view if any (i.e: the selected day on the <code>day</code> view). - the <code>input</code> element if there is a field rendered."
     },
     "closeOnSelect": {
-      "description": "If <code>true</code>, the popover or modal will close after submitting the full date."
+      "description": "If <code>true</code>, the Picker will close after submitting the full date."
     },
     "currentMonthCalendarPosition": { "description": "Position the current month is rendered in." },
     "dayOfWeekFormatter": {