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

Handle error for values of invalid data types in DateField #9119

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

qbantek
Copy link

@qbantek qbantek commented Jul 21, 2023

This PR proposes changes to handle the scenario when the DateField value does not match the type criteria to be handled as a Date.

Current behavior causes an error when trying to execute date.toLocaleString() on an undefined date value.

DateField.tsx:99 Uncaught TypeError: Cannot read properties of undefined (reading 'toLocaleString')
    at DateFieldImpl (DateField.tsx:99:20)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19588:20)
    at updateSimpleMemoComponent (react-dom.development.js:19425:10)
    at updateMemoComponent (react-dom.development.js:19284:14)
    at beginWork (react-dom.development.js:21673:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)

Copy link
Member

@fzaninotto fzaninotto left a comment

Choose a reason for hiding this comment

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

Thanks for the PR.

This PR raises an important question: when the value is invalid, should we display the empty text, or a new "invalid value" message? Because the problem also occurs in other fields, and react-admin needs to be consistent.

@djhi @slax57 any feedback on this question?

@@ -61,7 +61,18 @@ const DateFieldImpl = <
}

const value = get(record, source);
if (value == null || value === '') {
const parsedDate = (value: any) => {
Copy link
Member

Choose a reason for hiding this comment

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

I doin't understand why you extracted to a function just to call it afterwards.

Copy link
Author

@qbantek qbantek Jul 24, 2023

Choose a reason for hiding this comment

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

I did it to encapsulate the logic for validating whether the value can represent a Date or not. Probably a matter of style and personal preference, I can change it to inline code obviously.

Copy link
Member

Choose a reason for hiding this comment

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

yes, please inline this code

};
const date = parsedDate(value);

if (typeof date === 'undefined') {
Copy link
Member

Choose a reason for hiding this comment

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

Please keep the value == null test instead.

Copy link
Author

Choose a reason for hiding this comment

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

Not sure if I understood this request properly: Are you asking to have BOTH value == null and typeof date === 'undefined' or to get rid if the undefined criteria?

The way I see it the null check is handled before (in parsedDate function) and the undefined check is needed to avoid the error, kinda the whole point of this PR. Please correct me if I am wrong.

Copy link
Member

Choose a reason for hiding this comment

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

No you're right, the check is already made in parsedDate, you can keep your code as is for this part.

@slax57
Copy link
Contributor

slax57 commented Jul 24, 2023

@fzaninotto That's a good question indeed. I guess it can't hurt to introduce a new "invalid value" message, which will help both the developer (to see that there is an issue with the data) and the user (to avoid having a runtime error and a blank value).

@qbantek qbantek requested a review from fzaninotto July 24, 2023 14:32
@fzaninotto
Copy link
Member

In all the react-admin fields, only two render a different output in case of error: ReferenceField and ReferenceManyCount.

I think it's a good thing to show to the user that the value is invalid, so I'd recommend we do the same for invalid dates in DateField. In that case, the field could render the same ErrorIcon as ReferenceField.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants