React-modal: Modal not updating with React Intl

[flqw]

Summary:

I can't figure out a way to have React-Intl Translations <FormattedMessage /> to update within the Modal if the language changes.

Additional notes:

I tried overriding the componentDidMount/componentDidUnmount by subclassing the Modal and attaching the modal node within the IntlProvider that comes with React-Intl, but that didn't help. I also tried to pass some arbitrary properties to the Modal that trigger an update of the modal, but the children of the Modal won't update (i think that's because they are not rendered if the modal is hidden). Forcing the renderPortal doesn't help either, probably for the same reason.

Some way to have the Modal-Content re-render if the language has changed since the last display would be nice.

[twelch]

@flqw Do you mean it won't translate if the modal is rendered before you change the locale? If so, same issue I had. See the comments in this issue on use of injectIntl so that rerender is triggered - https://github.com/yahoo/react-intl/issues/371

[flqw]

Passing the intl to the Modal/Modal contents was my first attempt, but didn't work out as the Contents of the Modal did not re-render. The steps to reproduce the issue are:

1. Use <FormattedMessage /> within a Modal.
2. Render the page
3. Switch the language
4. Open the modal

The translations in the modal are still in the language in which the page was first rendered (even if it wasn't opened a single time). I believe it has something to do that the Modal isn't rendered in the render method but in the renderPortal method.

[cekk]

I have the same issue..
@flqw did you solved it somehow?

[flqw]

We now reload the whole page on language switch as it isn't something you do very frequently anyhow.

On 11. Apr 2017, 11:36 +0200, Andrea Cecchi [e-mail], wrote:
>

I have the same issue..@flqw (https://github.com/flqw) did you solved it somehow?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub (https://github.com/reactjs/react-modal/issues/187#issuecomment-293204788), or mute the thread (https://github.com/notifications/unsubscribe-auth/ABlB1U-FAOI_iomcwcVITo67eSla94efks5ru0mJgaJpZM4I5erC).

[cekk]

mmmm..ok..i don't like it very much, but could be an option.

[cekk]

btw i solved this issue without reloading the whole page, but wrapping the modal with intlProvider like this:

<IntlProvider locale="myLocale" messages="messages[myLocale]">
   <Modal />
</IntlProvider>

myLocale is a prop, so when this prop changes (language is changed), the modal is updated with the current locale.

[diasbruno]

@cekk Thank you for help with this one.

I'm closing this issue for clean up.