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?