title: How do I rectify add or select tags in rails (Selectize.js)
body: <p>I've got a simple tagging system in rails working using the has_many :through association. I'm adding adding tags to a Book (with selectize.js) if it exist or create if it doesn't. However, the new tag modal form is supposed to close automatically upon tag creation but it doesn't anymore, I do have to reload to select the created tag(s). I'm using rails 6 with webpacker. I've tried this feature without webpacker and things went well.</p>
  
  <pre><code>books/form.html.erb
  &lt;%= form_with(model: book, local: true) do |form| %&gt;
     &lt;% if book.errors.any? %&gt;
       &lt;div id="error_explanation"&gt;
         &lt;p&gt;&lt;%= pluralize(book.errors.count, "error") %&gt; prohibited this book from being saved:&lt;/p&gt;
  
        &lt;ul&gt;
        &lt;% book.errors.full_messages.each do |message| %&gt;
          &lt;li&gt;&lt;%= message %&gt;&lt;/li&gt;
        &lt;% end %&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;% end %&gt;
  
  &lt;div class="field"&gt;
    &lt;h6&gt;&lt;%= form.label :title %&gt;&lt;/h6&gt;
    &lt;%= form.text_field :title, class: "form-control" %&gt;
  &lt;/div&gt;
  
  &lt;div class="field"&gt;
    &lt;%= form.label :tags %&gt;
    &lt;%= form.select :tag_ids, Tag.all.pluck(:name, :id), {}, { multiple: true, class: "selectize" } %&gt;
  &lt;/div&gt;
  
  &lt;div class="actions"&gt;
    &lt;%= form.submit %&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;% end %&gt;
  
  &lt;div class="modal fade tag-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"&gt;
     &lt;div class="modal-dialog modal-sm" role="document"&gt;
       &lt;div class="modal-content"&gt;
         &lt;div class="modal-header"&gt;
           &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
          &lt;h6 class="modal-title" id="mySmallModalLabel"&gt;Add Tag&lt;/h6&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;%= form_for Tag.new do |f| %&gt;
            &lt;div class="form-group"&gt;
              &lt;%= f.label :name %&gt;
              &lt;%= f.text_field :name, class: "form-control" %&gt;
            &lt;/div&gt;
           &lt;div class="form-group"&gt;
             &lt;%= f.submit class: "btn btn-primary" %&gt;
           &lt;/div&gt;
         &lt;% end %&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Here's the js for that</p>
  
  <pre><code>tag.js
  $(document).on("turbolinks:load", function() {
  var selectizeCallback = null;
  
  $(".tag-modal").on("hide.bs.modal", function(e) {
    if (selectizeCallback != null) {
      selectizeCallback();
      selecitzeCallback = null;
    }
  
    $("#new_tag").trigger("reset");
    // $.rails.enableFormElements($("#new_tag"));
    Rails.enableElement($('#new_tag')[0]);
  });
  
  $("#new_tag").on("submit", function(e) {
    e.preventDefault();
    $.ajax({
      method: "POST",
      url: $(this).attr("action"),
      data: $(this).serialize(),
      success: function(response) {
        selectizeCallback({value: response.id, text: response.name});
        selectizeCallback = null;
  
        $(".tag-modal").modal('toggle');
      }
    });
  });
  
  $(".selectize").selectize({
    maxItems: 5,
    create: function(input, callback) {
      selectizeCallback = callback;
  
      $(".tag-modal").modal();
      $("#tag_name").val(input);
    }
  });
  
  
  });
  </code></pre>