openmrs / openmrs-esm-form-engine-lib

React Form Engine library for O3
Other
10 stars 59 forks source link

(Enhancement) Correctly handle dateValue with null or invalid date #393

Open ODORA0 opened 1 month ago

ODORA0 commented 1 month ago

Requirements

Summary

The core issue was that the dateValue being passed to the OpenmrsDatePicker and TimePicker components was often null or an invalid date (which shows up as Invalid Date in JavaScript). When these components received such values, they couldn’t handle them properly, which caused the RangeError: Invalid time value

Solution: Validation with isValidDate:

I introduced the isValidDate helper function to ensure that only valid Date objects are processed. This function checks if the dateValue is a valid instance of Date and if it's not NaN (which happens when a Date is constructed with invalid input). Wherever we were passing dateValue to the components, we first check if it’s valid. If it's not, we provide fallback behavior, like setting the value to null or creating a new valid Date where necessary. Fallback Values for Invalid Dates:

In the components, we now handle null or invalid dates gracefully by either defaulting to a valid date (like new Date()) or setting the value to null in case of an invalid date. This prevents the components from attempting to format invalid date values. Conditional Rendering and Disabling:

The TimePicker is disabled unless there's a valid date (dateValue). This ensures that we don’t allow interaction with the time input unless the user has selected a valid date. We also ensure that invalid dates are not passed into the TimePicker or DatePicker components to avoid any further rendering errors.

Screenshots

image

image

Related Issue

Other

samuelmale commented 2 weeks ago

@ODORA0 are you still working this?

ODORA0 commented 2 weeks ago

@samuelmale If this was resolved I can close it otherwise I can clean this and open it for review.

samuelmale commented 2 weeks ago

If this was resolved I can close it

@ODORA0 can you show me how I can reproduce the issue?

ODORA0 commented 2 weeks ago

@samuelmale Try this form, you will notice that on the next visit date fails to render. But when you remove the calculate expression it renders. However the idea behind the expression is that it should provide a date in the next visit date field 30 days after the date provided in the Registration Date field above it. This PR intended to fix that

samuelmale commented 2 weeks ago

I get the issue; in your case, the helper function is returning an invalid date. How about fixing the helper function?