[pickers] Reset the value of the input field using controlled value about mui-x HOT 8 OPEN

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#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

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 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. 😉

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.