data-turbo-action is not respected on requestSubmit() event from javascript

Hi there,

While updating turbo to version 7.2 today, I discovered a bug. Before upgrading to version 7.2, after calling requestSubmit() on the form via javascript, for example by clicking on the option “25” in the select box, Turbo would change the window location into something like /page?page_size=25 However, after performing the same steps with Turbo 7.2, the window location is not updated, and stays /page I’ve added a reduced snippet of HTML and JS to illustrate the problem.

If you need any additional information to debug the problem, I’m happy to supply extra information. Thanks for your great product! 😃

<form action="/page" method="GET" data-turbo-action="advance" id="filter-table"></form>

<select name="page_size" data-controller="select" form="filter-table">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>

The select_controller.js has a small snippet of javascript that will invoke requestSubmit() when the value of the select has changed.

...
export default class SelectController extends Controller {
  connect () {
  ...
      this.htmlInput.listen('MDCSelect:change', () => {
        htmlInput.form.requestSubmit()
      })
    ...
  }

  disconnect () {
    ...
  }
}

[tbeemster]

Hi @seanpdoyle,

I think you are correct in your findings. I have attached a beautiful picture, which hopefully shows you how I’m using this.

(By changing the select box, the “filter-table-form” is submitted. Since that form has data-turbo-frame="table", the response of that form will be parsed in the turbo-frame table. Since that form also has data-turbo-action="advance" the URL of that form submission will also be placed in the browser’s URL bar)

[tbeemster]

Thanks a lot