Comments (8)
Thank you for creating this issue. 🙏
A reproduction example would have been great to better understand your problem, but I think I get the idea and see the problem.
The problem is that currently there is no way to tell the picker to use the bound value
, because of this: https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts#L313
A possible solution could be to add an optional ref equality check:
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts
index 6cb85178f..7a9b504c9 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts
@@ -310,7 +310,8 @@ export const usePickerValue = <
if (
inValue !== undefined &&
(dateState.lastControlledValue === undefined ||
- !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue))
+ !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue) ||
+ dateState.lastControlledValue !== inValue)
) {
const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);
This would allow re-setting the picker value when the bound value reference changes, i.e. by doing setValue(currentValue => dayjs(currentValue))
.
Are there any problems that I don't see with this or better suggestions? 🤔
from mui-x.
Thank you for creating this issue. 🙏 A reproduction example would have been great to better understand your problem, but I think I get the idea and see the problem. The problem is that currently there is no way to tell the picker to use the bound
value
, because of this: https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts#L313A possible solution could be to add an optional ref equality check:
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts index 6cb85178f..7a9b504c9 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -310,7 +310,8 @@ export const usePickerValue = < if ( inValue !== undefined && (dateState.lastControlledValue === undefined || - !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue)) + !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue) || + dateState.lastControlledValue !== inValue) ) { const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);This would allow re-setting the picker value when the bound value reference changes, i.e. by doing
setValue(currentValue => dayjs(currentValue))
.Are there any problems that I don't see with this or better suggestions? 🤔
hi @LukasTy , Thank you for quick response. I have already tried to set the state like this but that didn't help. Do I need to make any other change as well except this setState ?
If you want me to make a change in some package file, that wont help, because before each deployment on server, it install the npm modules again,, so my change will be lost
from mui-x.
Do I need to make any other change as well except this setState ?
If you want me to make a change in some package file, that wont help, because before each deployment on server, it install the npm modules again,, so my change will be lost
My question was more open-ended and targeted to any other team member who would take a look at this issue.
I've moved the issue into the needs grooming
state so that we can address it and come up with the best solution for this case. 😉
In the meantime, if you really need this functionality and want to "battle-test" it, you can use https://www.npmjs.com/package/patch-package to apply my mentioned change (diff) to your installation.
Just confirming, that It will also run on CI. 😉
from mui-x.
Do I need to make any other change as well except this setState ?
If you want me to make a change in some package file, that wont help, because before each deployment on server, it install the npm modules again,, so my change will be lostMy question was more open-ended and targeted to any other team member who would take a look at this issue. I've moved the issue into the
needs grooming
state so that we can address it and come up with the best solution for this case. 😉 In the meantime, if you really need this functionality and want to "battle-test" it, you can use https://www.npmjs.com/package/patch-package to apply my mentioned change (diff) to your installation. Just confirming, that It will also run on CI. 😉
Thank you. Really amazed by your quick responses. I am sorry, but I don't know how this patch thing work and I am afraid of sending it to the production. Is there any way that we can stop invalid dates in the textbox itself ? I mean not allow user to enter invalid numbers such as 13th month or 31st of November etc. ? Then we won't even need to reset it through refs.
from mui-x.
Is there any way that we can stop invalid dates in the textbox itself ? I mean not allow user to enter invalid numbers such as 13th month or 31st of November etc. ? Then we won't even need to reset it through refs.
The initial version of fields did work like that, but it was changed with #7934
The issue is that the dependendant sections is not something that is very accessibility friendly and on top of that, it's not how the native html date input works, that's why we decided not to re-invent a wheel on this regard.
from mui-x.
Thank you for creating this issue. 🙏 A reproduction example would have been great to better understand your problem, but I think I get the idea and see the problem. The problem is that currently there is no way to tell the picker to use the bound
value
, because of this: https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts#L313
A possible solution could be to add an optional ref equality check:diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts index 6cb85178f..7a9b504c9 100644 --- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts +++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts @@ -310,7 +310,8 @@ export const usePickerValue = < if ( inValue !== undefined && (dateState.lastControlledValue === undefined || - !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue)) + !valueManager.areValuesEqual(utils, dateState.lastControlledValue, inValue) || + dateState.lastControlledValue !== inValue) ) { const isUpdateComingFromPicker = valueManager.areValuesEqual(utils, dateState.draft, inValue);This would allow re-setting the picker value when the bound value reference changes, i.e. by doing
setValue(currentValue => dayjs(currentValue))
.
Are there any problems that I don't see with this or better suggestions? 🤔hi @LukasTy , Thank you for quick response. I have already tried to set the state like this but that didn't help. Do I need to make any other change as well except this setState ?
If you want me to make a change in some package file, that wont help, because before each deployment on server, it install the npm modules again,, so my change will be lost
okay, is there any plan to merge this fix as well ?
from mui-x.
okay, is there any plan to merge this fix as well ?
I'll try creating a PR this week. 👌
from mui-x.
okay, is there any plan to merge this fix as well ?
I'll try creating a PR this week. 👌
Thank you very much. Will keep an eye :)
from mui-x.
Related Issues (20)
- [pickers] DateRangePicker close when navigating back and minDate is set HOT 10
- [pickers] slots not working properly while using onchange in mui-pickers HOT 10
- [docs] Customization playground - fix default theme values HOT 1
- [question] DataGrid Filtering Sorting
- MUI-X-Charts Not Building Properly in Next.js 12 Application HOT 1
- [pickers] Add previous and next year controls to date calendars HOT 6
- [core] Remove unnecessary syntax from JS Docs HOT 1
- [datagrid] Autosize Columns - Headers being cut off HOT 9
- Allow to customize the column definition of the checkbox added by checkboxSelection HOT 1
- [datagrid] Infinite width resize issue HOT 1
- [pickers] Support UTC dates and timezones for DateFns HOT 2
- Current meridiem in time clock HOT 2
- TreeView captures CTRL + ENTER key HOT 8
- [datagrid] How to autosize columns on rows fetch HOT 4
- [pickers] Days go blank when selecting date outside DST HOT 2
- About TreeItem new feature HOT 2
- [datagrid] Remove the legacy filtering API
- [Datagrid] Entering '0' or '-' in MUI DataGrid with 'number' column doesn't update the cell value on the first attempt
- [pickers] Day light saving cause duplicated day in calendar with dayjs HOT 1
- [question] HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-x.