DefaultValue option bug

[kg-currenxie]

🐛 Bug Report

We have a case like this

<Text text={t('.placeholder', { defaultValue: '' })} />
We have a generated form, where translation might, or might not be defined. So we'd like to just print nothing.

This commit/release (20.4.0) changes this behavior, and it will now look for the translation key '' instead.

To Reproduce

Works (v20.3.5)
https://codesandbox.io/s/react-i18next-20-3-5-ok-uxch7

Doesn't work: (v20.4.0)
https://codesandbox.io/s/react-i18next-20-4-0-bug-skq0v

Code to look at:

i18n.use(initReactI18next).init({
  ...
  // The purpose of this is to be able to catch missing translations easy, in the UI, even in non-development envrionments.
  parseMissingKeyHandler: (key) => {
    return `[[MISSING KEY: ${key}]]`;
  }
}

and

<h2>{t("hello2", { defaultValue: "Fallback" })}</h2>

Expected behavior

It should print the string Fallback

Current behavior

It prints the string from returned from parseMissingKeyHandler.

Your Environment

• runtime version: i.e. as in Codesandbox
• i18next version: i.e. 20.4.0
• os: Mac

[adrai]

Sorry, but I don't really get what the problem is.
For me 20.4.0 looks correct and 20.3.5 not.

You're using the parseMissingKeyHandler function, and the return value is used.

[adrai]

So, if you do not like to manipulate the missingKey return value, do not use parseMissingKeyHandler but use missingKeyHandler.

[kg-currenxie]

The documentation says that it will print the value specified, not that it would lookup a fallback translation key.
parseMissingKeyHandler function(key) { // return value to display }

And
missingKeyHandler says (needs saveMissing set to true!), which we don't have set to true.

[adrai]

The documentation says that it will print the value specified, not that it would lookup a fallback translation key.
parseMissingKeyHandler function(key) { // return value to display }

Yes, this is exactly what it is doing.

You are returning: [[MISSING KEY: ${key}]] and this is what gets shown in the UI

Sorry, but I still don't get what the real problem is.

[adrai]

If you like, we can pass in the default value to the parseMissingKeyHandler function, so you can return that.
What do you think?

[adrai]

The signature will then be: parseMissingKeyHandler function(key, defaultValue) { // return value to display }
And you could just return the defaultValue

[kg-currenxie]

Before; I could pass defaultValue, and get that displayed in the value in the UI. Getting Fallback, rather than [[Missing key]]. That's fine because i then specifically know how I wanted to handle that missing key.
That means, when we saw [[Missing key]] in the UI, we knew that the translation was actually missing, and that we didn't pass a defaultValue.

Now: I get [[Missing key]] in both scenarios, and I can't distinguish between them.

[kg-currenxie]

The signature will then be: parseMissingKeyHandler function(key, defaultValue)

I think that would work in our case

[adrai]

ok, will check if we can do so...

[adrai]

i18next v21.6.11 should be better for you

[kg-currenxie]

Wow that's fast :) I'll try and let you know..

[kg-currenxie]

@adrai that works perfectly! Thank you so much <3