Dynamic forms with file upload in Rails

I’m trying to create a dynamic form with Rails and Turbo/Stimulus, where selecting a value from a dropdown would trigger some changes in the form’s content.

I followed the guide at https://eagerworks.com/blog/nested-select-fields-hotwire-stimulus, which works well, until I create a file uploading component in the form, which cannot be managed this way, passing the form values to a GET request.

Due to this, I figured I can refactor the dynamically changing part of the form (which does not include the file upload part) into a separate partial (using <%= fields %> instead of <%= form_with %> in this sub-partial) , and refresh only that partial in the Turbo response. This also works, i.e. the dynamic part of the form updates using turbo_stream.update, but the event listeners in the updated dynamic part stop working. Even if I re-run the connect() function of the Stimulus controller after rendering the update, I see that event listeners are attached but not fired. I assume this is because dynamic DOM elements do not fire events?

Is this the correct approach I’m trying to implement? If not, can you recommend an alternative one?

I did not have chance to play with that, but data-turbo-permanent sounds like a perfect fit for your use case. Did you maybe try it out?

  • data-turbo-permanent persists the element between page loads. The element must have a unique id attribute. It also serves to exclude elements from being morphed when using page refreshes with morphing