[pickers] Set closeOnSelect prop default value to false on pickers containing time views
#14397
+162
−116
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -51,9 +51,12 @@ In all the below scenarios, the picker closes when `onClose` is called, except i | |||||
| #### 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`. | ||||||
| The default value of `closeOnSelect` varies among the components: | ||||||
|
|
||||||
| - `DatePicker` and `DateRangePicker`: `true` on desktop and `false` on mobile variants; | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| - `TimePicker`, `DateTimePicker` and `DateTimeRangePicker`: `false` on both desktop and mobile variants. | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
|
|
||||||
| 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. | ||||||
|
|
@@ -225,7 +228,10 @@ You can use the second argument passed to the `onAccept` callback to get the val | |||||
| #### 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. | ||||||
| The default value of `closeOnSelect` varies among the components: | ||||||
arthurbalduini marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Same changes as proposed above |
||||||
|
|
||||||
| - `DatePicker` and `DateRangePicker`: `true` on desktop and `false` on mobile variants; | ||||||
| - `TimePicker`, `DateTimePicker` and `DateTimeRangePicker`: `false` on both desktop and mobile variants. | ||||||
|
Comment on lines
+233
to
+234
There was a problem hiding this comment. same as @flaviendelangle 's suggestion above: Date Picker, Date Range Picker, etc. |
||||||
|
|
||||||
| Here are a few examples: | ||||||
|
|
||||||
|
|
||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -73,7 +73,7 @@ DateTimeRangePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default false | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -122,6 +122,11 @@ export interface BaseDateTimeRangePickerProps<TDate extends PickerValidDate> | |||||||||||
| * If `undefined`, internally defined view will be used. | ||||||||||||
| */ | ||||||||||||
| viewRenderers?: Partial<DateTimeRangePickerRenderers<TDate, DateTimeRangePickerView>>; | ||||||||||||
| /** | ||||||||||||
| * If `true`, the popover or modal will close after submitting the full date. | ||||||||||||
| * @default false | ||||||||||||
| */ | ||||||||||||
| closeOnSelect?: boolean; | ||||||||||||
|
Comment on lines
+119
to
+123
There was a problem hiding this comment. Maybe we could update the JSDoc of this prop on
Suggested change
There was a problem hiding this comment. The less override we have the better 🙏 |
||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| type UseDateTimeRangePickerDefaultizedProps< | ||||||||||||
|
|
||||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -113,7 +113,7 @@ DesktopDateRangePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default true | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -44,4 +44,9 @@ export interface DesktopDateRangePickerProps< | |||||||||
| * @default {} | ||||||||||
| */ | ||||||||||
| slotProps?: DesktopDateRangePickerSlotProps<TDate, TEnableAccessibleFieldDOMStructure>; | ||||||||||
| /** | ||||||||||
| * If `true`, the popover or modal will close after submitting the full date. | ||||||||||
|
There was a problem hiding this comment. If we have a specific definition per component, we know its default behavior.
Suggested change
Otherwise, we could go the more abstract route to avoid the need to update the JSDoc when we move range pickers away from the tooltip to dialog/popover. 🤔
Suggested change
|
||||||||||
| * @default true | ||||||||||
| */ | ||||||||||
| closeOnSelect?: boolean; | ||||||||||
| } | ||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,7 +12,6 @@ import { | |
| } from '@mui/x-date-pickers/internals'; | ||
| import { extractValidationProps } from '@mui/x-date-pickers/validation'; | ||
| import { PickerOwnerState, PickerValidDate } from '@mui/x-date-pickers/models'; | ||
| import resolveComponentProps from '@mui/utils/resolveComponentProps'; | ||
| import { refType } from '@mui/utils'; | ||
| import { | ||
|
|
@@ -25,7 +24,6 @@ import { | |
| } from '@mui/x-date-pickers/MultiSectionDigitalClock'; | ||
| import Divider from '@mui/material/Divider'; | ||
| import { digitalClockClasses } from '@mui/x-date-pickers/DigitalClock'; | ||
| import { DesktopDateTimePickerLayout } from '@mui/x-date-pickers/DesktopDateTimePicker'; | ||
| import { rangeValueManager } from '../internals/utils/valueManagers'; | ||
| import { DesktopDateTimeRangePickerProps } from './DesktopDateTimeRangePicker.types'; | ||
|
|
@@ -168,8 +166,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang | |
| const views = !shouldHoursRendererContainMeridiemView | ||
| ? defaultizedProps.views.filter((view) => view !== 'meridiem') | ||
| : defaultizedProps.views; | ||
|
|
||
| const props = { | ||
| ...defaultizedProps, | ||
|
|
@@ -200,10 +196,6 @@ const DesktopDateTimeRangePicker = React.forwardRef(function DesktopDateTimeRang | |
| toolbarVariant: 'desktop', | ||
| ...defaultizedProps.slotProps?.toolbar, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
|
|
@@ -248,7 +240,7 @@ DesktopDateTimeRangePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default false | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -109,7 +109,7 @@ MobileDateRangePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default false | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { MakeOptional, MobileOnlyPickerProps } from '@mui/x-date-pickers/internals'; | ||
| import { PickerValidDate } from '@mui/x-date-pickers/models'; | ||
| import { | ||
| UseMobileRangePickerSlots, | ||
|
|
@@ -28,6 +28,7 @@ export interface MobileDateRangePickerProps< | |
| TDate extends PickerValidDate, | ||
| TEnableAccessibleFieldDOMStructure extends boolean = true, | ||
| > extends BaseDateRangePickerProps<TDate>, | ||
| Pick<MobileOnlyPickerProps, 'closeOnSelect'>, | ||
| MobileRangeOnlyPickerProps { | ||
| /** | ||
| * Overridable component slots. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -237,7 +237,7 @@ MobileDateTimeRangePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default false | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import { MakeOptional, MobileOnlyPickerProps } from '@mui/x-date-pickers/internals'; | ||
| import { PickerValidDate } from '@mui/x-date-pickers/models'; | ||
| import { | ||
| UseMobileRangePickerSlots, | ||
|
|
@@ -33,6 +33,7 @@ export interface MobileDateTimeRangePickerProps< | |
| TDate extends PickerValidDate, | ||
| TEnableAccessibleFieldDOMStructure extends boolean = true, | ||
| > extends BaseDateTimeRangePickerProps<TDate>, | ||
| Pick<MobileOnlyPickerProps, 'closeOnSelect'>, | ||
| MobileRangeOnlyPickerProps { | ||
| /** | ||
| * Overridable component slots. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -64,7 +64,7 @@ DatePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default `true` for desktop, `false` for mobile variant (based on the chosen wrapper and `desktopModeMediaQuery` prop). | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -54,6 +54,11 @@ export interface DatePickerProps< | |||||||||
| * @default 4 on desktop, 3 on mobile | ||||||||||
| */ | ||||||||||
| yearsPerRow?: 3 | 4; | ||||||||||
| /** | ||||||||||
| * If `true`, the popover or modal will close after submitting the full date. | ||||||||||
| * @default `true` for desktop, `false` for mobile variant (based on the chosen wrapper and `desktopModeMediaQuery` prop). | ||||||||||
|
There was a problem hiding this comment. Not fan of just adding
Suggested change
or
Suggested change
There was a problem hiding this comment. We currently call them "variants" in the doc as well. 🙈 There was a problem hiding this comment. Suggestion updated 😆 |
||||||||||
| */ | ||||||||||
| closeOnSelect?: boolean; | ||||||||||
| } | ||||||||||
|
|
||||||||||
| /** | ||||||||||
|
|
||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -74,7 +74,7 @@ DateTimePicker.propTypes = { | |
| className: PropTypes.string, | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default false | ||
| */ | ||
| closeOnSelect: PropTypes.bool, | ||
| /** | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -105,6 +105,11 @@ export interface BaseDateTimePickerProps< | |
| * If `undefined`, internally defined view will be used. | ||
| */ | ||
| viewRenderers?: Partial<DateTimePickerViewRenderers<TDate, TView>>; | ||
| /** | ||
| * If `true`, the popover or modal will close after submitting the full date. | ||
| * @default false | ||
| */ | ||
| closeOnSelect?: boolean; | ||
| } | ||
|
|
||
| type UseDateTimePickerDefaultizedProps< | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
But I'll let @samuelsycamore check the wordings 🙏
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm happy with your version @flaviendelangle 👍