defaultDate prop in MonthPickerInput and YearPickerInput is ignored (tested fix enclosed)

[mkf62]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/dates

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

None

Describe the bug

Both MonthPickerInput and YearPickerInput have the getDefaultClampedDate function called when setting the defaultDate if _value or _value[0] is null. When using these pickers in forms, where Mantine docs suggest using uncontrolled components for best performance of forms, the defaultDate prop becomes important. The getDefaultClampedDate function doesn't resolve how I would expect it to though because it derives the defaultDate from the minDate and maxDate props instead of using the developer-supplied defaultDate:

mantine/packages/@mantine/dates/src/components/MonthPickerInput/MonthPickerInput.tsx

Lines 138 to 142 in 1d07a31

	defaultDate={
	Array.isArray(_value)
	? _value[0] || getDefaultClampedDate({ maxDate, minDate })
	: _value || getDefaultClampedDate({ maxDate, minDate })
	}

mantine/packages/@mantine/dates/src/components/YearPickerInput/YearPickerInput.tsx

Lines 133 to 138 in 1d07a31

	defaultDate={
	Array.isArray(_value)
	? _value[0] ||
	getDefaultClampedDate({ maxDate, minDate, timezone: ctx.getTimezone() })
	: _value || getDefaultClampedDate({ maxDate, minDate, timezone: ctx.getTimezone() })
	}

mantine/packages/@mantine/dates/src/utils/get-default-clamped-date.ts

Lines 10 to 26 in 1d07a31

	export function getDefaultClampedDate({ minDate, maxDate, timezone }: GetDefaultClampedDate) {
	const today = shiftTimezone('add', new Date(), timezone);
	if (!minDate && !maxDate) {
	return today;
	}
	if (minDate && dayjs(today).isBefore(minDate)) {
	return minDate;
	}
	if (maxDate && dayjs(today).isAfter(maxDate)) {
	return maxDate;
	}
	return today;
	}

I think the MonthPickerInput and the YearPickerInput should operate the same way as the DatePickerInput when setting the defaultDate, otherwise the defaultDate prop on Month/Year pickers serves no purpose since it will always be derived from the minDate or maxDate props.

mantine/packages/@mantine/dates/src/components/DatePickerInput/DatePickerInput.tsx

Line 108 in 1d07a31

const _defaultDate = Array.isArray(_value) ? _value[0] || defaultDate : _value || defaultDate;

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-zxhyqr

Possible fix

I tested changing the code in the MonthPickerInput to this and it performed as I expected it to:

 defaultDate={ 
   Array.isArray(_value) 
     ? _value[0] || calendarProps.defaultDate || getDefaultDate({minDate, maxDate, timezone: ctx.getTimezone() })
     : _value || calendarProps.defaultDate || getDefaultDate({minDate, maxDate, timezone: ctx.getTimezone() })
 } 

I tested changing the code in the YearPickerInput to the same code above and it performed as I expected it to also.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Fixed in 7.14.2