Replacing frame under frame stopped working on Turbo 8

1

hey :wave:

We have a modal that allows users to add items to a parent record. the modal is the good old “turbo frame after body tag that gets replaced”.

on the modal, they can filter items, and when applying the filter, another turbo frame (inside modal’s turbo frame) should get replaced.

the modal looks something like this:

<turbo-frame id="modal">
  <form data-turbo-frame="true" method="get">
    <input type="text" name="search">..
    <input type="number" name="size">..
    <button submit></button>
  </form>

  <turbo-frame id="uld-list">
    <!-- List of items -->
    <%= render partial "available-uld-list", ulds: @ulds %>
  </turbo-frame>  
</turbo-frame>

the controller action that opens up the modal or replaces uld-list is the same and do different things depending on the request type:

def show
  respond_to do |format|
    format.html # show.html.haml, opens the modal
    format.turbo_stream do
      render turbo_stream: turbo_stream.replace(
        "available-uld-list",
        partial: "available_uld_list",
        locals: {unit_load_devices: @unit_load_devices}
      )
    end
  end
end

this worked fine on Turbo v7, but on Turbo v8 (8.0.0 up to 8.0.4), the modal closes even though the request succeeds, and I can see the response on the Network tab.

I already crossed a bunch of things from the suspect list

  • Request headers: text/vnd.turbo-stream.html, text/html, application/xhtml+xml
  • Response header: text/vnd.turbo-stream.html; charset=utf-8
  • Response body is a Turbo stream action:
<turbo-stream action="replace" target="available-uld-list"><template>....

what I have already tried:

  • set data-turbo-method: get on the form and remove the method: get (appears to go ignored, defaults to POST then)
  • add data-turbo-frame: "available-uld-list" to the form
  • different Turbo v8 versions
1 Like