Locale.js: PrimeReact object is deprecated but still used in Locale.js

[silviagreen]

Describe the bug

PrimeReact object is deprecated, as PrimeReactContext should be used instead. Nevertheless, in Locale.js script, this object is still used in other methods like "localeOptions".

This seems causing issues when these methods are used in component, i.e. Calendar component. In my case, I am developing a web app using NextJs 13.5.6 + i18next and PrimeReact 10.3.3. When running the app in iPhone browser (Safari or Chrome or Firefox have same behavior), the default locale remain set as 'en', despite I have added other languages and changed the default locale using the locale() function.

Reproducer

Link to codesandbox - bug on mobile only, desktop is ok

PrimeReact version

10.3.3

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

iOS 17.x (Tried with safari, chrome and Firefox)

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

This should already be fixed in 10.3.3 with this fix: https://github.com/primefaces/primereact/pull/5659/files#diff-2251cb9776d8a7387112e87daeb4f89c740a6e1416be8d67fe81f17d79143de7

Please update and try again.

[silviagreen]

This should already be fixed in 10.3.3 with this fix: https://github.com/primefaces/primereact/pull/5659/files#diff-2251cb9776d8a7387112e87daeb4f89c740a6e1416be8d67fe81f17d79143de7

Please update and try again.

@melloware My bad, version I am using is 10.3.3. So the bug seems not solved.

[melloware]

Hmm can you create a reproducer showing the issue?

[github-actions[bot]]

Please fork the CodeSandbox project or Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[melloware]

OK in your reproducer you need to change the hook to update here:

<PrimeReactProvider value={{ unstyled: true, locale: XXX }}>

That is what will change the locale globally.

[silviagreen]

OK in your reproducer you need to change the hook to update here:

<PrimeReactProvider value={{ unstyled: true, locale: XXX }}>

That is what will change the locale globally.

@melloware so the call to locale function is not enough for a global dynamic locale change?

[melloware]

Right now locale is a static function which hsa no access to hooks or the Context.

function locale(locale) {
    locale && (PrimeReact.locale = locale);

    return {
        locale: PrimeReact.locale,
        options: locales[PrimeReact.locale]
    };
}

So yes I think those static functions are all deprecated and you should be using the <PrimeReactProvider> to control the locale.

Or those functions need to be changed from static functions to hooks but that is a larger change.

[silviagreen]

Right now locale is a static function which hsa no access to hooks or the Context.

function locale(locale) {
    locale && (PrimeReact.locale = locale);

    return {
        locale: PrimeReact.locale,
        options: locales[PrimeReact.locale]
    };
}

So yes I think those static functions are all deprecated and you should be using the <PrimeReactProvider> to control the locale.

Or those functions need to be changed from static functions to hooks but that is a larger change.

@melloware I think this is a change that can ben useful. In this moment, combining i18next provider and PrimeReactProvider is quite tricky in my opinion.

[melloware]

So I am using il8next as well and here is what I did.

const LoginPage = () => {
    // global hooks
    const { t, i18n } = useTranslation();
    const context = React.useContext(PrimeReactContext);

const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
    context && context.setLocale(lng);
};

So basically we need to find a way with i8ln to update the PrimeReactContext when a language changes? Thoughts?

[melloware]

I opened this ticket in react-i18n: https://github.com/i18next/react-i18next/issues/1721

[melloware]

@silviagreen it looks like you can subscribe to language changed and set the PrimeReact Context.

    i18n.on("languageChanged", function (lng) {
        context && context.setLocale(lng);
    });

Can you try it?

[kyybo]

Hi, @melloware @silviagreen The 'addLocale' function, import from "primereact/api", can receive options which are of type 'LocaleOptions' (define here https://github.com/primefaces/primereact/blob/master/components/lib/api/api.d.ts)

But the interface LocaleOptions is missing a lot of options if we compare with the format of locale options here : https://github.com/primefaces/primelocale/blob/main/README.md (e.g : some calendar locale such as "chooseYear", "chooseMonth", etc and some aria like aria.star, aria.scrollTop, etc

Is this difference can be related to this issue ?

[melloware]

@kyybo no that is a different issue. You can open a new issue if you want the TypeScript for all the options needs to be updated.