Trans context handled differently from t function

[stefan-schweiger]

🐛 Bug Report

When using a translation with a context and a "fallback" (= key without context) the results for using t('key', { context: 'non-existing-context' ) and <Trans i18nKey="key" context="non-existing-context" />.

Here I'm using undefined and 'asdf' as the context values:

If used like this <Trans i18nKey="key" values={{ context: 'non-existing-context' }} /> the resulting output matches the one from t(...).

To Reproduce

https://stackblitz.com/edit/vitejs-vite-dfveac?file=src%2FApp.tsx&terminal=dev

export const resources = {
  en: {
    translation: {
      testContext1: 'EN: {{context}}',
      testContext1_Test1: 'EN: Context1 Test1',
      testContext1_Test2: 'EN: Context1 Test2',
      // ...
    },
  },
};

i18n.use(initReactI18next).init({
  resources,
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // react already safes from xss
  },
});

<tr>
  <td>{t('testContext1', { context: undefined })}</td>
  <td>
    <Trans i18nKey="testContext1" context={undefined} />
  </td>
</tr>
<tr>
  <td>{t('testContext1', { context: 'asdf' })}</td>
  <td>
    <Trans i18nKey="testContext1" context={'asdf'} />
  </td>
</tr>

Expected behavior

<Trans context="..." /> should work the same as t('asdf', { context: 'asdf' }) as described in the doc.

[adrai]

should be addressed with v14.0.6

[stefan-schweiger]

wow, thank you for the fast response!

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏

[stefan-schweiger]

I just tried to update my reproduction to 14.0.6 but I still get a different output when I use the context property of Trans :(

https://stackblitz.com/edit/vitejs-vite-9ntmun?file=package.json&terminal=dev

[adrai]

This test is green: https://github.com/i18next/react-i18next/blob/master/test/trans.render.spec.jsx#L880
Can you try to setup a failing test here?

[adrai]

ahh I know why....

[adrai]

That's because of the override of the prefix and suffix here: https://github.com/i18next/react-i18next/blob/master/src/TransWithoutContext.js#L357 but I don't remember why this was done like that... maybe @jamuhl remembers why?
Beside that, I can only say that normally the context interpolation for Trans component should by done with tags and children (<1></1>) and not like with the t function with {{context}}...

[adrai]

fyi: I locally just removed to pass the interpolationOverride object to... and all tests are still green... so it may be we can simplify that to no have the interpolation option override? @jamuhl ?

[adrai]

I just released v14.0.7 that removes the internal interpolationOverride handling...
if the community opens new issues because of that, we will probably revert this change

[stefan-schweiger]

Seems to work now, thanks! :)