React-Admin <TranslateInput> how to get the translated label? - internationalization

Question

following the docs [here][1] I created some en.js and fr.js file to translate the fields of my react-admin app
examples:
const fr = {
resources: {
categories: {
name: 'Catégorie |||| Catégories',
fields: {
code: 'N°',
trigram: 'Trigramme',
description: {
en: 'Description (Anglais)',
fr: 'Description (Français)',
cn: 'Description (Chinois)',
},
},
},
},
};
I have a similar file for English and Chinese with the description as follow
description: {
en: 'Description (English)',
fr: 'Description (French)',
cn: 'Description (Chinese)',
},
and
description: {
en: '类别的描述 (英文)',
fr: '类别的描述 (法文)',
cn: '类别的描述 (中文)',
},
this seems to work fine and I can use the TranslatableInputs as well
<TranslatableInputs locales={['en', 'fr', 'cn']}>
<TextInput source='description' />
</TranslatableInputs>
But, the label in the tab view doesn't seem to be applied (while in the list mode they are shown properly) using description.en for example so the link with the .js files is working fine I guess.
But as shown in the documentation with the Music example the label doesn't change when we switch tab (actually the same problem is show in the documentation's gif
the "name" label doesn't change to "nom"
[![enter image description here][2]][2]
any help to solve that? thanks a lot and thanks a lot to RA team for their wonderful work as well
Nico
[1]: https://marmelab.com/react-admin/TranslatableInputs.html
[2]: https://i.stack.imgur.com/16fWf.gif

Answer 1

That's a great question... And a current limitation of the TranslatableInput component.
The input label translation uses the global user locale, not the one of the selected tab. That would be a great feature to add to react-admin, and I invite you to open a feature request in the react-admin repository.
In the meantime, you should write your own TranslatableInput based on react-admin's, and wrap each tab content with <I18NContext.Provider> in which you force a different locale.
Something like (not tested):
export const TranslatableInputs = (props) => {
const {
className,
defaultLocale,
locales,
groupKey = '',
selector = <TranslatableInputsTabs groupKey={groupKey} />,
children,
variant,
margin,
} = props;
const context = useTranslatable({ defaultLocale, locales });
const i18nProvider = useI18nProvider();
return (
<Root className={className}>
<TranslatableContextProvider value={context}>
{selector}
{locales.map(locale => (
<I18nContext.Provider value={{...i18nProvider, getLocale: () => locale }}>
<TranslatableInputsTabContent
key={locale}
locale={locale}
groupKey={groupKey}
variant={variant}
margin={margin}
>
{children}
</TranslatableInputsTabContent>
</I18nContext.Provider>
))}
</TranslatableContextProvider>
</Root>
);
};