How to break out of a turbo frame for redirect on a form submit

The solution was to use a turbo stream response in the controller instead of a turbo frame.

app/views/orders/show.html.erb (no changes)

...
<%= render "order_review_form", locals: {order: @order} %>
...

app/views/shared/_form_error.html.erb

Notes:

• New partial to house only the form error
• Note that the target local is what links all of this together across the view and the controller

<div id="<%= target %>">
  <% if local_assigns[:error] %>
    <p class="alert alert-danger alert-dismissible fade show">
      <%= sanitize(local_assigns[:error]) %>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </p>
  <% end %>
</div>

app/views/_order_review_form.html.erb

Changes:

• Removed the wrapping turbo frame tag. Note the target local being passed in.
• Rendering the new form error partial
• Removed the value: params[:comment] from the text field, it's not needed anymore since we're just replacing only the error section and not the entire form

<%= render(partial: "shared/form_error", locals: { target: OrderReviewsController::FORM_ERROR_TARGET }) %>

<%= form_with(model: Review.new, url: order_review_path(local_assigns[:order])) do |f| %>
  <div>
    <%= f.label :comment %>
    <%= f.text_field :comment%>
  </div>

  <%= submit_tag "Submit review", class: "btn btn-sm btn-success" %>
<% end %>

app/controllers/order_reviews_controller.rb

Changes: Added the constant FORM_ERROR_TARGET so it can be referenced in the view and the controller and changed the render to render a turbo stream for the form error. Note that the FORM_ERROR_TARGET is passed in the render in two places. This effectively replaces whatever html element has the id of FORM_ERROR_TARGET with the contents of the partial.

...
FORM_ERROR_TARGET = "order-review-form-error"
...
def create
  OrderReviewCreator.call(@order, params)
  redirect_to(order_path(@order), status: :see_other)
rescue AppError => e
  render(
    turbo_stream: turbo_stream.replace(
      FORM_ERROR_TARGET,
      partial: "shared/form_error",
      locals: {
        target: FORM_ERROR_TARGET,
        error: e.detail,
      },
    ),
    status: :unprocessable_entity,
  )
end
...