BUG: Patient form is accepting wrong dates in date field

[Tanuj1718]

Describe the bug
We can write any value(decimal, >12) manually in months box of DOB (Date of Birth).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://care.ohc.network/facility/9557da74-f0a0-44dd-9152-ef02be5767d2/patient/create?
2. Fill the details and write some random value on DOB section , especially on months.
3. Create Patient
4. See error , patient is created.

Expected behavior
When user type wrong values manually in DOB, it show show error message. Although it is creating patient with default month (december) when wrong value is entered, but it should show proper error message.

Screenshots

InShot_20250202_111116534.mp4

Desktop (please complete the following information):

• OS: MacOS

[Tanuj1718]

@bodhish @rithviknishad If it gets approved, please assign it to me.

[Tanuj1718]

@rithviknishad I think it is a state management issue as when I am continuously changing values, it is showing anonymous behavior. Sometimes the wrong value is getting replaced by the random values between 1-31 for days and 1-12 for months. There may be some other issue also which I am missing. I am working on it.

[Jacobjeevan]

@rithviknishad I think it is a state management issue as when I am continuously changing values, it is showing anonymous behavior. Sometimes the wrong value is getting replaced by the random values between 1-31 for days and 1-12 for months. There may be some other issue also which I am missing. I am working on it.

date-field is expecting user to type in 2 digit values for month (handleMonthChange doesn't change anything if there's only one digit).

To fix this, you can modify the logic in handleMonthChange to pad newMonth before the conditional checks. Also given that form doesn't allow submission when month > 12 (barring the padding issue above), I don't think any additional error handling is needed.

Edit: handleMonthChange is also the reason why you are able to submit the form after going back and entering 122 in the month column (month isn't changed within form value, instead submitted with previous value).

Edit: The auto focus to next cell causes an issue here, hmm let me see.

[Tanuj1718]

@rithviknishad I think it is a state management issue as when I am continuously changing values, it is showing anonymous behavior. Sometimes the wrong value is getting replaced by the random values between 1-31 for days and 1-12 for months. There may be some other issue also which I am missing. I am working on it.

date-field is expecting user to type in 2 digit values for month (handleMonthChange doesn't change anything if there's only one digit).

To fix this, you can modify the logic in handleMonthChange to pad newMonth before the conditional checks. Also given that form doesn't allow submission when month > 12 (barring the padding issue above), I don't think any additional error handling is needed.

Edit: handleMonthChange is also the reason why you are able to submit the form after going back and entering 122 in the month column (month isn't changed within form value, instead submitted with previous value).

Edit: The auto focus to next cell causes an issue here, hmm let me see.

I have also tried onFocus and onInput event handlers to clear the values but it is not working.

[Jacobjeevan]

@rithviknishad I think it is a state management issue as when I am continuously changing values, it is showing anonymous behavior. Sometimes the wrong value is getting replaced by the random values between 1-31 for days and 1-12 for months. There may be some other issue also which I am missing. I am working on it.

date-field is expecting user to type in 2 digit values for month (handleMonthChange doesn't change anything if there's only one digit).
To fix this, you can modify the logic in handleMonthChange to pad newMonth before the conditional checks. Also given that form doesn't allow submission when month > 12 (barring the padding issue above), I don't think any additional error handling is needed.
Edit: handleMonthChange is also the reason why you are able to submit the form after going back and entering 122 in the month column (month isn't changed within form value, instead submitted with previous value).
Edit: The auto focus to next cell causes an issue here, hmm let me see.

I have also tried onFocus and onInput event handlers to clear the values but it is not working.

You pad the field with an onBlur handler (do the same for day as well) and remove the focus behavior in handleDayChange and handleMonthChange.

   const handleMonthBlur = () => {
    if (month.length === 1 && parseInt(month) >= 1 && parseInt(month) <= 9) {
      const paddedMonth = month.padStart(2, "0");
      setMonth(paddedMonth);
      if (isValidDate(year, paddedMonth, day) && onChange) {
        const updatedDate = new Date(
          parseInt(year),
          parseInt(paddedMonth) - 1,
          parseInt(day),
        );
        onChange(updatedDate);
      }
    }
  };