nested frames with a form will not redirect

[jcoyne]

Given I have a template that looks like this:

<%= turbo_frame_tag 'modal_thing' do %>
  <%= turbo_frame_tag 'create_tag', target: '_top' do %>
    <%= form_with url: '/bags/1', method: 'patch' do |form| %>
      <input name="title">
      <button type="submit">go</button>
    <% end %>
  <% end %>
<% end %>

And my server responds with a 302 redirect.

Then the page does not redirect on form submission and I see this error in the javascript console:

Response has no matching <turbo-frame id="modal_thing"> element turbo.es2017-esm.js:5181
    _callee25$ turbo.es2017-esm.js:5181
    Babel 8
    _callee22$ turbo.es2017-esm.js:4906
    Babel 10
    formSubmissionSucceededWithResponse turbo.es2017-esm.js:5065
    requestSucceededWithResponse turbo.es2017-esm.js:1048
    _callee2$ turbo.es2017-esm.js:616
    Babel 8
    _callee$ turbo.es2017-esm.js:559
    Babel 12
    _callee4$ turbo.es2017-esm.js:972
    Babel 8
    formSubmissionIntercepted turbo.es2017-esm.js:4992
    submitBubbled turbo.es2017-esm.js:1214
    (Async: EventListener.handleEvent)
    start turbo.es2017-esm.js:1226
    connect turbo.es2017-esm.js:4785
    connectedCallback turbo.es2017-esm.js:143
    (Async: LifecycleConnectedCallback)
    js turbo.es2017-esm.js:5621
    Webpack 9

If I remove the outer containing turbo-frame, then it works as expected.

[boardfish]

I've been having exactly the same problem. I've tried applying target="_top" to the form, the inner frame, and the outer frame.

If target: '_top' is applied to the inner frame and/or the form, the error refers to the outer frame as in the OP.

If target: '_top' is applied to both frames and the form, the error reads Response has no matching <turbo-frame id="\39 modal_thing"> element.

[boardfish]

In my case, the nesting of the frames is necessary because the route with the form is loaded using the src attribute, and the form itself is in a Turbo frame on its own page so that it can be rerendered in isolation.

[boardfish]

This Stimulus controller I wrote should work as a stopgap in the meantime:

/* form_controller.js */
import { Controller } from "stimulus"
import * as Turbo from "@hotwired/turbo"

export default class extends Controller {
  static values = { next: String }

  connect() {
    this.element.addEventListener("turbo:submit-end", (event) => {
      this.next(event)
    })
  }

  next(event) {
    if (event.detail.success) {
      Turbo.visit(event.detail.fetchResponse.response.url)
    }
  }
}

If it's just the frame you want to redirect, you should be able to adapt it to change the turbo frame src according to their docs.

As I said, this is a stopgap, though.

[jcoyne]

@boardfish My use case is exactly the same, using the outer frame to do lazy loading with the src attribute.

[tleish]

#399 for an explanation of the problem and a suggested PR

[boardfish]

This issue can now be closed. I've successfully got the case outlined by @jcoyne to work with Turbo 7.0.1.

[boardfish]

Thanks for the fix, @tleish and co.!