nested frames with a form will not redirect

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]

Thanks for the fix, @tleish and co.!