Form validation errors are translated twice

[owenbendavies]

What you were expecting:
In our i18nProvider we have code to raise an error if a translation is missing

export const i18nProvider = {
  ...polyglotProvider,
  translate: (key: string, options: any) => {
    const translation = polyglotProvider.translate(key, options);

    if (translation === key) throw new Error(`missing translation "${key}"`);

    return translation;
  },
};

We are expecting validation translations to work when we have code to ensure translations aren't missing

<TextInput validate={minLength(10), 'error.minLength'} />

What happened instead:
It fails with Error: missing translation "Must be 10 characters at least"

Steps to reproduce:

1. Add the above code
2. Enter text in text input which is less than 10 characters

Other information:
If adding logging to the above function it does first get called with error.minLength then gets called with return value of that e.g. Must be 10 characters at least. I suspect somewhere it calling translate again when it is not needed.

I have found one area where this happens

react-admin/packages/ra-ui-materialui/src/button/SkipNavigationButton.tsx

Line 13 in a408de0

label={translate('ra.navigation.skip_nav')}

But cannot find where this happen in the validation code.

Environment

• React-admin version: 4.8.0
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.2
• Browser: any
• Stack trace (in case of a JS error):

[slax57]

Reproduced, thanks!
Stackblitz: https://stackblitz.com/edit/github-pwhz5l?file=src/posts/PostCreate.tsx

[owenbendavies]

Great thank you @slax57, much easier than https://xkcd.com/583/