React Overlays do not work as documented

[sandalwoodbox]

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>&lt;confirm&gt;Create account&lt;/confirm&gt; or &lt;cancel&gt;go back&lt;/cancel&gt;.</p>

Version: @fluent/react 0.13.0

[sandalwoodbox]

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]

@sandalwoodbox have you figured out how to make it work with default locale?

[sandalwoodbox]

@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.