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' %>
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.