ruby-on-railsruby-on-rails-6hotwire-railsturbo

In a Hotwire/Rails app, when to use target: '_top' for a turbo_frame?


The turbo handbook explains target: '_top' here and here.

But I still don't understand what's the difference between these two forms:

#1

<%= turbo_frame_tag 'new_search', target: '_top' do %>    
  <%= search_form_for :q do |f| %>
    ...
  <% end %>
<% end %>

#2

<%= search_form_for :q do |f| %>
  ...
<% end %>

Both form will send a normal HTML format request via GET method, and the whole page will be replaced by Turbo Drive. So their behavior looks quite similar in this case.

Is target: '_top' only useful when I need to lazy load something via the src attribute of Turbo Frame while I want the content navigate outside the frame? :

<%= turbo_frame_tag 'something', src: '/something', target: '_top' %>

Solution

  • You are correct that a form outside of any wrapping frame (like your #2 example) is the same as a form within a frame tag that has a target="_top"

    But consider your first example without the _top attribute:

    <%= turbo_frame_tag 'new_search' do %>    
         <%= search_form_for :q do |f| %>
         ...
         <% end %>
    <% end %
    

    This is now not the same as example #2, the result of the search form will only operate within the new_search frame. This is the point of the _top attribute, to break a form or link outside of it's wrapping frame.