MarkupText only renders first child when using fallback

[nephix]

Steps:

1. Go to https://codesandbox.io/s/1zzm1n6npq
2. Open en.json and locate news.title property
3. See the correct output in result window: <span>This <em>should work</em></span>
4. Change news.title in index.js to news.whatever

Expected Result:

The default text
<span>This <b>This doesnt work</b></span>
is rendered in the result window

Actual Result:

<span>This </span>
is rendered in the result window

[azizhk]

This is because the following code seems to pick only the first child.

preact-i18n/src/components/text.js

Line 44 in 0287d0f

let fallback = children && children[0];

[billneff79]

That is likely the issue. I would be happy to review a PR that changes it to just fallback = children and added test cases for a fallback with markup in it.

[nephix]

I changed it to fallback = children and implemented a test case but the issue remained. Not sure what the actual issue is. Can someone else with more experience have a look at it?

[azizhk]

Sorry try changing

preact-i18n/src/lib/translate-mapping.js

Line 31 in 8a43fc7

fallback: def.children && def.children[0]

Your working example: https://codesandbox.io/s/31rq37xnn5

[nephix]

Hey @azizhk, thank you. Although that fixes the problem, it lets a bunch of other test cases fail.

[nephix]

Is there a chance of this getting fixed and released any time soon? It's currently blocking us from rolling out our app in another location.

[pl12133]

@nephix Surely, I would be happy to review a PR with the fix recommended by @azizhk.

[nephix]

@pl12133 sure, but the fix brings a whole lot of other issues when you run the tests that I'm not able to fix.

[azizhk]

Created a PR #21

[billneff79]

This is resolved in preact-i18n@1.2.1

[gavmck]

Same issue with the basic <Text> field caused by the same line of code by the looks of it