Turbo form not resetting with Stimulus 2.0 Controller

1

I setup the test app for hotwire with rails 6.0.3.4, and I’m currently using webpack 4.0. For some odd reason, the stimulus controller has no effect on the turbo-frame form. I tried multiple ways to reset the form, yet none work as expected. Can anyone help me with fixing this issue?

javascript/controllers/reset_form_controller.js

import {Controller} from "stimulus"
export default class extends Controller {
 reset() {
   this.element.reset() // doesn't remove text from content input field
    }
}

views/conversation_comments/new.html.erb

<%= turbo_frame_tag 'new_conversation_comment', target: "_top" do %>
<%= form_with(model: [@conversation, @conversation_comment],
              data: { controller: "reset_form", action: 'turbo:submit-end->reset_form#reset' }, html: {class: 'form-inline'}) do |form| %>

    <%= button_tag 'Post', class: 'btn btn-primary mr-2', 'data-reset_form-target': 'button', style: 'float: right;' do %>
      <i class="fas fa-commentl"></i>
    <% end %>

    <div style="z-index: 1000; padding-right: .5em; width: 90%;">
      <%= form.text_field :content, class: 'form-control' %>
    </div>

    <% if enterprise_user_signed_in? %>
      <%= form.hidden_field :enterprise_user_id, value: current_enterprise_user.id %>
    <% elsif user_signed_in? %>
      <%= form.hidden_field :user_id, value: current_user.id %>
      <% end %>
    <% end %>
  <script>
    $(document).ready(function() {
       $("#conversation_comment_content").emojioneArea({
            pickerPosition: "top",
            filtersPosition: "bottom",
            tones: false,
            autocomplete: false,
            inline: true,
            hidePickerOnBlur: false
        });
    });
  </script>
<% end %>

applicaton.js

import "@hotwired/turbo-rails"
import $ from 'jquery';
global.$ = global.jQuery = $;
import "@fortawesome/fontawesome-free/js/all"
import '@client-side-validations/client-side-validations'
import '@client-side-validations/simple-form/dist/simple-form.bootstrap4'
import './typeahead'
import "nouislider/distribute/nouislider.min.css";
import * as noUiSlider from 'nouislider/distribute/nouislider'
window.noUiSlider = noUiSlider
import 'bootstrap'
import "./taginput"
import 'emojionearea';
import './legacy';
import './picker'
import './picker.time';

window.Bloodhound = require('bloodhound-js');
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("trix")
require("@rails/actiontext")
require("chartkick")
require("chart.js")
require("@nathanvda/cocoon")
import "controllers"

environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery',
        Popper: ['popper.js', 'default']
    }), new CleanWebpackPlugin()
);



module.exports = environment
1 Like
2

The erb code appears to use an incorrect naming convention for the controller. It should use kebab-case.

- reset_form
+ reset-form

see: Stimulus > Controllers > Naming Conventions

1 Like