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.

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

Fix DateInput and DateTimeInput Do Not Handle Temporary Values Correctly #9543

Merged
merged 6 commits into from
Jul 30, 2024

Conversation

arimet
Copy link
Contributor

@arimet arimet commented Dec 22, 2023

Fix #9330

The final implementation works in all tested browsers and handle reset correctly. However, required validation won't work when the form mode is set to onChange. The validation message will only be displayed when the input is blurred.

}
}, [setRenderCount, parse, field]);

const { onBlur: onBlurFromField } = field;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why have a different logic for onBlur and onFocus?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-hook-form only handle onBlur not onFocus and it will call any custom onBlur provided

const renderHelperText =
helperText !== false || ((isTouched || isSubmitted) && invalid);

const { ref, name } = field;

console.log('field', field);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

console.log spotted

@@ -133,7 +211,8 @@ const getStringFromDate = (value: string | Date) => {
// null, undefined and empty string values should not go through dateFormatter
// otherwise, it returns undefined and will make the input an uncontrolled one.
if (value == null || value === '') {
return '';
console.log('toto');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

console.log spotted

return (
<TextField
id={id}
{...field}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why remove {...field} ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the input is fully controlled locally now

@slax57
Copy link
Contributor

slax57 commented Jan 4, 2024

I'm afraid you brought a regression to the DateInput component:

Capture.video.2024-01-04.11.52.30.mp4

@slax57 slax57 removed their assignment Jan 4, 2024
@djhi djhi changed the title Fix(input): Set DateInput and DateTimeInput to uncontrolled input Fix DateInput and DateTimeInput Do not Handle Temporary Values Correctly Jul 30, 2024
@djhi djhi changed the title Fix DateInput and DateTimeInput Do not Handle Temporary Values Correctly Fix DateInput and DateTimeInput Do Not Handle Temporary Values Correctly Jul 30, 2024
@adguernier adguernier self-requested a review July 30, 2024 12:15
@adguernier adguernier added this to the 5.1.1 milestone Jul 30, 2024
@adguernier adguernier merged commit 0f0c1bc into master Jul 30, 2024
14 checks passed
@adguernier adguernier deleted the fix/dateInput branch July 30, 2024 12:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DateTimeInput or DateInput reinitialise when typing a date starting with '0' - only on Firefox
4 participants