Title not changing accordingly with Turbo Drive

colmexdev commented 2 years ago

Hello there.

Recently, while implementing I18n localization, I found out something that seems pretty strange to me.

To switch between locales, I use url_for(request.params.merge(locale: I18n.locale, only_path: true)) in the link's href. Content is displaying according to the locale; nonetheless, page's <title> doesn't get updated and becomes "delayed" (first locale switching doesn't change <title>; from there on, it updates as the previous visit should be).

On refreshing/restoration visits, title sets accordingly. It seems to be only on application visits. Could it be something related to caching/navigation? I'm not really sure what can it be.

I also tried the following:

Setting data-turbo-cache=false on title (issue persists).
Setting <meta name="turbo-cache-control" content="no-preview"> on head (issue persists, even with no-cache value).
Setting data-turbo="false" on link (issue persists).

Thank you in advance for your attention!

marcelolx commented 2 years ago

@colmexdev Could you provide a sample app where we can see this issue happen? What immediately comes to my mind is that Turbo doesn't replace the head of the document, so the title element in the head of your page doesn't get updated (only the body), but I wouldn't expect that with the link having a data-turbo=false 🤔

A sample app would help to debug your issue.

marcoroth commented 2 years ago

Hey @colmexdev, just checking back, were you able to resolve this issue?

mrosso10 commented 1 year ago

Hi, I'm having the same issue. Except in the case of data-turbo=false (here it reloads the entire page and title tag gets updated). But working with turbo drive and turbo frames, the title tag doesn't update and I see two reasons:

First of all, layout isn't rendered on turbo frame requests: https://github.com/hotwired/turbo-rails/blob/454efaa27fc64789fca1ea584a0873c82855ba2c/app/controllers/turbo/frames/frame_request.rb#L16
Even if the whole layout was rendered, turbo doesn't care of changes in the <head> tag.

Anyway, I found this workaround: https://lightrun.com/answers/hotwired-turbo-easy-way-to-update-title-and-other-elements-using-frames

goulvench commented 4 months ago

Hi, I saw that

the default layout includes a yield :head section,
frame_request.rb indicates that it's still possible to render content into the head, and
turbo.js branches when it finds a title element.

I therefore added content_for(:head) { "<title>My new page title</title>" } in a view, and confirm that it is being received by the browser. However, nothing is done with the new title.

It would be useful to update the page title automatically if the layout head contains one. Even better, it would be even nicer if we could set the title without the surrounding tag. This could be achieved by adding the following to frame.html.erb:

<% if content_for?(:head_title) %>
<title><%= yield :head_title %></title>
<% end %>

With this addition, one would only need to set content_for(:head_title) { "My new page title" } to update the page title.

Some use cases I can think of: paginating data, switching between in-page tabs, navigating in a funnel…

Would this be considered useful? I can start work on a PR if needed, though I would probably need help on the JS side of things (turbo.js is 5800 lines long, that's a lot to wrap my head around 😅).

hotwired / turbo-rails

Title not changing accordingly with Turbo Drive #357