Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MonthPicker in range mode in controlled form endlessly useEffect calls #7336

Closed
2 tasks done
openscript opened this issue Jan 7, 2025 · 4 comments · May be fixed by #7389
Closed
2 tasks done

MonthPicker in range mode in controlled form endlessly useEffect calls #7336

openscript opened this issue Jan 7, 2025 · 4 comments · May be fixed by #7389

Comments

@openscript
Copy link

openscript commented Jan 7, 2025 •
edited
Loading

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.15.3 / 7.16.0 / 7.16.1

What package has an issue?

@mantine/dates

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

When using the <MonthPicker> in range mode within a controlled form use-date-state.ts endlessly calls useEffect at

mantine/packages/@mantine/dates/src/hooks/use-dates-state/use-dates-state.ts

Lines 169 to 178 in 476b417

if (_value[0] && !_value[1]) {
setPickedDate(_value[0]);
} else {
const isNeitherSelected = _value[0] == null && _value[1] == null;
const isBothSelected = _value[0] != null && _value[1] != null;
if (isNeitherSelected || isBothSelected) {
setPickedDate(null);
setHoveredDate(null);
}
}

The controlled form sets the value of the <MonthPicker> to [new Date(), null].

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

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

Possible fix

In Version 7.15.1 the issue was not present.

Self-service

  • I would be willing to implement a fix for this issue
@openscript openscript changed the title MonthPicker in range mode in controlled form endlessly useEffect calls regression MonthPicker in range mode in controlled form endlessly useEffect calls Jan 7, 2025
@openscript
Copy link
Author

Seems to be a regression from #7278

@stampaaaron stampaaaron mentioned this issue Jan 14, 2025
Open
@rtivital
Copy link
Member

The issue is not related to Mantine. Most likely there is something wrong with your useEffect, but it is difficult to tell without a thorough examination of the code for which I do not have time (sorry). You can see that the controlled state works correctly, the component is rerendered only when the value changes – https://codesandbox.io/p/sandbox/mantine-react-template-forked-tqyhgp

@openscript
Copy link
Author

I still believe it's an issue related to Mantine. I'm sorry for not providing a more minimal reproduction initially. Now I've updated the reproduction.

The error only happens, when the MonthPicker is in range-mode and a picking is active:

Screencast.From.2025-01-21.12-49-27.mp4

@openscript
Copy link
Author

It seems to be related to the <DatesProvider> setting the UTC timezone.

@openscript openscript mentioned this issue Jan 21, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[@mantine/dates] MonthPicker: improve set picked date update logic openscript-ch/mantine
2 participants
@openscript @rtivital