Skip to content

Commit

Permalink
[pickers] Always use props.value when it changes (mui#15490)
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle authored and LukasTy committed Dec 19, 2024
1 parent c7385d0 commit 8957896
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { fireEvent } from '@mui/internal-test-utils';
import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
import { fireUserEvent } from 'test/utils/fireUserEvent';
import {
createPickerRenderer,
buildFieldInteractions,
Expand Down Expand Up @@ -98,6 +99,47 @@ describe('<DesktopDatePicker /> - Field', () => {
testFormat({ views: ['year', 'month', 'day'] }, 'MM/DD/YYYY');
testFormat({ views: ['year', 'day'] }, 'MM/DD/YYYY');
});

it('should allow to set the value to its previous valid value using props.value', () => {
// Test with accessible DOM structure
let view = renderWithProps(
{
enableAccessibleFieldDOMStructure: true as const,
value: adapterToUse.date('2022-10-31'),
},
{ componentFamily: 'picker' },
);

view.selectSection('month');
expectFieldValueV7(view.getSectionsContainer(), '10/31/2022');

view.pressKey(0, 'ArrowUp');
expectFieldValueV7(view.getSectionsContainer(), '11/31/2022');

view.setProps({ value: adapterToUse.date('2022-10-31') });
expectFieldValueV7(view.getSectionsContainer(), '10/31/2022');

view.unmount();

// Test with non-accessible DOM structure
view = renderWithProps(
{
enableAccessibleFieldDOMStructure: false as const,
value: adapterToUse.date('2022-10-31'),
},
{ componentFamily: 'picker' },
);

const input = getTextbox();
view.selectSection('month');
expectFieldValueV6(input, '10/31/2022');

fireUserEvent.keyPress(input, { key: 'ArrowUp' });
expectFieldValueV6(input, '11/31/2022');

view.setProps({ value: adapterToUse.date('2022-10-31') });
expectFieldValueV6(input, '10/31/2022');
});
});

describe('slots: field', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ export const usePickerValue = <
draft: initialValue,
lastPublishedValue: initialValue,
lastCommittedValue: initialValue,
lastControlledValue: inValueWithTimezoneToRender,
lastControlledValue: inValueWithoutRenderTimezone,
hasBeenModifiedSinceMount: false,
};
});
Expand Down Expand Up @@ -315,15 +315,7 @@ export const usePickerValue = <
}
});

if (
inValueWithTimezoneToRender !== undefined &&
(dateState.lastControlledValue === undefined ||
!valueManager.areValuesEqual(
utils,
dateState.lastControlledValue,
inValueWithTimezoneToRender,
))
) {
if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
const isUpdateComingFromPicker = valueManager.areValuesEqual(
utils,
dateState.draft,
Expand All @@ -332,7 +324,7 @@ export const usePickerValue = <

setDateState((prev) => ({
...prev,
lastControlledValue: inValueWithTimezoneToRender,
lastControlledValue: inValueWithoutRenderTimezone,
...(isUpdateComingFromPicker
? {}
: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ export interface UsePickerValueState<TValue> {
*/
lastCommittedValue: TValue;
/**
* Last value passed with `props.value`.
* Last value passed to `props.value`.
* Used to update the `draft` value whenever the `value` prop changes.
*/
lastControlledValue: TValue | undefined;
Expand Down

0 comments on commit 8957896

Please sign in to comment.