Localization issue with Datepicker-timeFields error message in unified shell app

[nagsrinath]

Provide a general summary of the issue here

Localization issue with Datepicker-timeFields error message where language selection happens at user profile level (not browser), this works fine for the language selection at browser level.

🤔 Expected Behavior?

all texts including error messages on DatePicker component should be localized irrespective of language selection at browser level or profile level.

😯 Current Behavior

In DatePicker component, the "Datepicker-timeFields" error message is not getting localized when language selection happens at user profile level. In spectrum documentation, did not find any example how to achieve this and tried with errorMessage prop and validate function but its ends-up working only at "Datepicker-dialogContent" level but not at "Datepicker-timeFields"

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. login to adobe workfront on unified shell env
2. change user profile language from english to any other (spanish, chinese, etc., )
3. Click on DatePicker component from Documents-Approvals area
4. Select current date to trigger an error against minValue and maxValue props

You would notice error messages gets localized only at "Datepicker-dialogContent" level but not at "Datepicker-timeFields"

Version

3.19.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac, windows

🧢 Your Company/Team

Adobe/Workfront

🕷 Tracking Issue

No response

[devongovett]

These error messages are provided by the browser. See the docs

Note: The default error messages are localized by the browser using the browser/operating system language setting. React Spectrum's Provider has no effect on validation errors.

If you change your browser's language to match, you'll see the correct translation. The globalization team deemed this to be the expected behavior, as it's most likely that a user's browser language will match their app language setting.

That said, the docs show how you can customize the error message if you want to pay the bundle size cost of distributing your own localized strings.

[nagsrinath]

Thank you for the response. WF has customers/users on Unified shell environemnt where the language selection is at user profile level (not browser level) that is where the localization is not working.

And, I attempted to use validate function and errorMessage prop in DatePicker component to customize the error message but that does not give us the control to customizate "Datepicker-timeFields" error message. Is there any hacky way to deal this? Thank you.

[snowystinger]

Can you provide a codesandbox or stackblitz demonstrating what you tried to do in order to change the error message? We may be able to help you get it working without jumping to "hacky"

[nagsrinath]

Here is the code snippet of DatePicker component/logics

return (
  <div className={invalidIconStyles}>
    <Provider locale={getUserLocale()}>
      <DatePicker
        label={<span className={labelStyles}>{labels.deadline}</span>}
        granularity="hour"
        value={value ? ISOToCalendarDate(value) : null}
        onChange={onChange}
        minValue={CURRENT_DATE}
        maxValue={MAX_DEADLINE_DATE}
        data-testid="deadline-date-picker"
        validate={(date) => labels[deadlineValidationText(date)]}
      />
    </Provider>
  </div>
);

export const ISOToCalendarDate = (ISOString) => {
  const d = new Date(ISOString);
  return new CalendarDateTime(
    d.getFullYear(),
    d.getMonth() + 1,
    d.getDate(),
    d.getHours(),
    d.getMinutes(),
    d.getSeconds()
  );
};

export const deadlineValidationText = (selectedDeadline) => {
  if ((selectedDeadline > MAX_DEADLINE_DATE) && ((selectedDeadline.hour >= MAX_DEADLINE_DATE.hour) || (selectedDeadline.hour <= MAX_DEADLINE_DATE.hour))) return 'deadlineMaxErrorText';
  if ((selectedDeadline < now(getLocalTimeZone())) && ((selectedDeadline.hour <= now(getLocalTimeZone()).hour) || (selectedDeadline.hour >= now(getLocalTimeZone()).hour))) return 'deadlineMinErrorText';
  return null;
};

const [labels] = useApprovalLocalizations({
  deadlineMaxErrorText: {
    messageKey: 'approval.deadline.max.date',
    fallback: `Deadline must be on or before ${FORMATTED_MAX_DATE}`,
    args: [FORMATTED_MAX_DATE],
  },
  deadlineMinErrorText: {
    messageKey: 'approval.deadline.min.date',
    fallback: `Deadline must be on or after ${FORMATTED_CURRENT_DATE}`,
    args: [FORMATTED_CURRENT_DATE],
  },
});

With current logics, able to achieve the results on the screenshots. please let me know if you have any additional questions and suggest me what should do different to get the required results. Appreciate your help. Thank you

[snowystinger]

Looks like the docs are working and it's working for me in a codesandbox https://codesandbox.io/p/sandbox/zk8ycf

Can you share a codesandbox or stackblitz where it is not working so we can see what is going on and debug it?

Can you try using a more up to date version of React Spectrum? the one you're on is from June 15, 2022. We've made a lot of improvements to forms and validation since then.

[nagsrinath]

Ok. Cool. Thanks for the example and this is simple and straight use case.

Now, we are getting close to my requirements or the issue. With following tiny changes, you should be able to reproduce the problem stated.

1. Add hour/minutue granularity to the DatePicker along minValue and maxValue props.
2. update your validate function to check whether given date is outside of ranges then throw customized error message.
3. Now, presume, user selected a date outside those min and Max and you would see the error message at DateField level
4. When you click calender button, calendar popover comes up with two error messages - One for Time and another one for DateField level.

Here i am looking for answer how to customize the error message at Time Field. Please let me whether you are successful generating the issue mentioned here.

If you still have a problem in reproducing the narrated issue, tomorrow, i will share my code in the codesandbox.

[snowystinger]

I see, I've added the granularity so there is now a TimeField in the DatePicker. https://codesandbox.io/p/devbox/prod-forest-tg45fs?file=%2Fsrc%2FApp.js%3A27%2C46&workspaceId=ws_CrSP6ipvDmgFWioMsdFjKL
It works for the usual validation route.

As you've pointed out though, min/max do not. This is ok, the globalization team is ok with this. If you want to change them, you can expand the move min/max out by one day and do custom validation on the two edge days as it sounds like there may be some times when that date is ok depending on the time of day.