Repository navigation
React Overlays do not work as documented #538
Description
According to https://github.com/projectfluent/fluent.js/wiki/React-Overlays, I should be able to do the following:
<Localized
id="create-account"
elems={{
confirm: <button onClick={() => {console.log('hi')}}></button>,
cancel: <a href="/"></a>
}}
>
<p>{'<confirm>Create account</confirm> or <cancel>go back</cancel>.'}</p>
</Localized>And have it be rendered as:
<p>
<button onClick={createAccount}>Create account</button> or <Link to="/">go back</Link>.
</p>However, instead, it is rendered as:
<p><confirm>Create account</confirm> or <cancel>go back</cancel>.</p>Version: @fluent/react 0.13.0
Activity
sandalwoodbox commentedon Apr 4, 2021
It seems like possibly the issue here was that the overlays only actually kick in when you render a translation (vs. the default translated string). This still seems like a bug since it's not what I'd expect the behavior for rendering the default translation to be - but it shouldn't be impactful as long as a translated text exists.
pitops commentedon May 24, 2021
@sandalwoodbox have you figured out how to make it work with default locale?
sandalwoodbox commentedon May 26, 2021
@pitops In my experience it worked fine with the default locale as long as the default locale had a translation. But if fluent had to fall back to rendering the inline content, it would no longer do variable substitution. If you're having trouble with the default locale that sounds like a different issue.