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

user_5005466 0
Viewed 3274

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' %>
turbo hotwire-rails ruby-on-rails-6 ruby-on-rails
1 Answers

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.

user_10326630
Related