Rails turbo frame + I18n-rails

1

Hi Hotwire Community,

I’m working on a Rails 7 app with Turbo 8 and facing an issue where I18n.locale changes aren’t consistently reflected inside Turbo Frames. My setup includes Rails 7, Turbo 8, and i18n-rails for internationalization. Changing the interface language updates product listings correctly across the app, but a modal fetched within a Turbo Frame remains in the original language (:en), even though outside the frame, I18n.locale correctly shows the updated locale (:ru).

Key points:

  • Rails 7, Turbo 8, i18n-rails used.
  • Locale changes reflect everywhere except inside Turbo Frames.
  • I18n.locale updates correctly outside Turbo Frames but not within.

Has anyone encountered and solved a similar issue? How can I ensure Turbo Frames also reflect the updated locale? Any suggestions or insights would be greatly appreciated.

Thanks in advance! :heart:

:warning: [UPDATE!] :warning: => I found a way to solve my problem :sweat_smile:, what I did was send the locale param (if present) in the link that sends the request to the server to load the product content in the modal frame. This, at least, solves the problem :ok_hand:

Kapture 2024-03-16 at 23.55.30

  • app/views/products/index.html.erb
  ...
  <div class="space-y-4 p-3">
    <%= render "categorized_products" %>
    <%= render "categorized_wines" %>
    <%= turbo_frame_tag :modal %> <--- This is the modal frame
  </div>
  ...
  • app/views/products/_categorized_products.html.erb
   ...
  <% products.each do |product| %>
    <%= turbo_stream_from product %>

    <%= link_to product, data: { turbo_frame: "modal" } do %> <--- link that loads product/show 
      <%= render "product", product: product %>
    <% end %>
  <% end %>
   ...
  • app/views/products/show.html.erb
<%= turbo_frame_tag :modal do %>
  <div data-controller='modal' id='product-modal' class="flex items-center fixed inset-0 z-20 modal-container h-screen" data-action="click->modal#close">
    ... Product SHOW
  </div>
<% end %>
2

This is specific to how you configure Rails to maintain i18n state (unrelated to turbo-frame). If you removed turbo-frame and the links navigated strait to a Rails page, the user would experience the same issue. The Rails documentation outlines multiple options for how to set the I18n.locale, otherwise it rolls back to the i18n.default_locale. Some options for changing the locale from default are:

  • params (url, form, etc)
  • domain (e.g. example.com vs example.de)
  • user config (e.g. stored in DB)
  • session or cookie

see: Rails Internationalization (I18n) API > 2.2 Managing the Locale across Requests

1 Like
3

Thank you @tleish for the information!

I was a bit confused initially, but later on, I realized that the mistake was mine, and was triggered by don’t RTFM. :sweat_smile: