Add allow empty option for @selectize/selectize

app/assets/javascripts/administrate/application.js

@@ -3,6 +3,6 @@ import "trix";
 import "@rails/actiontext";
 
 import "@hotwired/turbo-rails";
-import "selectize/dist/js/selectize.min.js";
+import "@selectize/selectize/dist/js/selectize.min.js";
 
 import "./controllers";

app/assets/javascripts/administrate/controllers/application.js

@@ -6,4 +6,14 @@ const application = Application.start();
 application.debug = false;
 window.Stimulus   = application;
 
+// Workaround for Stimulus controllers not being properly disconnected
+// https://github.com/hotwired/stimulus/issues/104#issuecomment-365393601
+document.addEventListener('turbo:before-cache', function() {
+  application.controllers.forEach(function(controller){
+    if(typeof controller.teardown === 'function') {
+      controller.teardown();
+    }
+  });
+});
+
 export { application };

app/assets/javascripts/administrate/controllers/select_controller.js

@@ -1,17 +1,29 @@
 import { Controller } from "@hotwired/stimulus";
 import $ from "jquery";
 
+const default_options = {
+  allowEmptyOption: true,
+  deselectBehavior: 'previous'
+}
+
 export default class extends Controller {
   connect() {
     if (!this.selectize) {
-      const options = this.selectizeOptions || {};
+      const options = this.selectizeOptions || default_options;
       const selectedValues = $(this.element).val();
       this.selectize = $(this.element).selectize(options)[0].selectize;
       this.selectize.setValue(selectedValues);
+      if (this.element.getAttribute('data-selectize-required') === 'true') {
+        this.selectize.on('change', (value) => {
+          if (value.length === 0) {
+            this.selectize.setValue(selectedValues);
+          }
+        });
+      }
     }
   }
 
-  disconnect() {
+  teardown() {
     if (this.selectize) {
       const selectedValues = this.selectize.getValue();
       if (!this.selectizeOptions) {

app/assets/stylesheets/administrate/application.scss

@@ -3,8 +3,8 @@
 @import "reset/normalize";
 
 @import "trix/dist/trix";
-@import "selectize/dist/css/selectize";
-@import "selectize/dist/css/selectize.default";
+@import "@selectize/selectize/dist/css/selectize";
+@import "@selectize/selectize/dist/css/selectize.default";
 
 @import "library/clearfix";
 @import "library/data-label";

app/views/fields/belongs_to/_form.html.erb

@@ -22,6 +22,6 @@ that displays all possible records to associate with.
 <div class="field-unit__field">
   <%= f.select(field.permitted_attribute,
                options_for_select(field.associated_resource_options, field.selected_option),
-               {include_blank: field.include_blank_option},
-               data: {controller: field.html_controller}) %>
+               field.tag_options,
+               field.html_options) %>
 </div>

app/views/fields/select/_form.html.erb

@@ -26,8 +26,8 @@ to be displayed on a resource's edit form page.
         field.selectable_options,
         field.data,
       ),
-      {include_blank: field.include_blank_option},
-      data: {controller: field.html_controller}
+      field.tag_options,
+      field.html_options
     )
   %>
 </div>

lib/administrate/field/belongs_to.rb

@@ -34,10 +34,45 @@ def selected_option
         data&.send(association_primary_key)
       end
 
+      def tag_options
+        {include_blank: selectize_include_blank}
+      end
+
+      def html_options
+        {
+          placeholder: selectize_placeholder,
+          data: {
+            controller: html_controller,
+            **selectize_required_options
+          }
+        }
+      end
+
       def include_blank_option
         options.fetch(:include_blank, true)
       end
 
+      def selectize_include_blank
+        if include_blank_option === true
+          # I18n.t(:"helpers.select.prompt")
+          "---" # Workaround for https://github.com/selectize/selectize.js/issues/1498
+        elsif include_blank_option.is_a?(::String)
+          include_blank_option
+        end
+      end
+
+      def selectize_placeholder
+        selectize_include_blank
+      end
+
+      def selectize_required_options
+        if include_blank_option === false
+          {"selectize-required": true}
+        else
+          {}
+        end
+      end
+
       private
 
       def candidate_resources

lib/administrate/field/select.rb

@@ -24,10 +24,45 @@ def selectable_options
         values
       end
 
+      def tag_options
+        {include_blank: selectize_include_blank}
+      end
+
+      def html_options
+        {
+          placeholder: selectize_placeholder,
+          data: {
+            controller: html_controller,
+            **selectize_required_options
+          }
+        }
+      end
+
       def include_blank_option
         options.fetch(:include_blank, false)
       end
 
+      def selectize_include_blank
+        if include_blank_option === true
+          # I18n.t(:"helpers.select.prompt")
+          "---" # Workaround for https://github.com/selectize/selectize.js/issues/1498
+        elsif include_blank_option.is_a?(::String)
+          include_blank_option
+        end
+      end
+
+      def selectize_placeholder
+        selectize_include_blank
+      end
+
+      def selectize_required_options
+        if include_blank_option === false
+          {"selectize-required": true}
+        else
+          {}
+        end
+      end
+
       def active_record_enum?
         resource.class.defined_enums.key?(attribute.to_s)
       end

package.json

@@ -8,10 +8,10 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.0",
     "@rails/actiontext": "^8.0.0",
+    "@selectize/selectize": "^0.15.2",
     "esbuild": "^0.25.0",
     "jquery": "^3.7.0",
     "sass": "^1.63.6",
-    "selectize": "^0.12.6",
     "trix": "^2.1.4"
   },
   "devDependencies": {

spec/administrate/views/fields/select/_edit_spec.rb

@@ -9,8 +9,8 @@
       attribute: :email_subscriber,
       data: false,
       selectable_options: [true, false, nil],
-      include_blank_option: false,
-      html_controller: "select"
+      tag_options: {include_blank: false},
+      html_options: {data: {controller: "select"}}
     )
 
     fields model: customer do |f|
@@ -33,8 +33,8 @@
       attribute: :email_subscriber,
       data: "Yes",
       selectable_options: ["Yes", "No"],
-      include_blank_option: "Unknown",
-      html_controller: "select"
+      tag_options: {include_blank: "Unknown"},
+      html_options: {data: {controller: "select"}}
     )
 
     fields model: customer do |f|

spec/lib/fields/belongs_to_spec.rb

@@ -171,6 +171,72 @@
         expect(candidates).to eq([])
       end
     end
+
+    context "when given an include_blank option is true" do
+      it "returns include_blank and placeholder options with '---'" do
+        customer = create(:customer, territory: nil)
+        association = Administrate::Field::BelongsTo.with_options(
+          include_blank: true
+        )
+        field = association.new(
+          :territory,
+          [],
+          :edit,
+          resource: customer
+        )
+
+        tag_options = field.tag_options
+        html_options = field.html_options
+
+        expect(tag_options[:include_blank]).to eq("---")
+        expect(html_options[:placeholder]).to eq("---")
+        expect(html_options.dig(:data, :"selectize-required")).to be_nil
+      end
+    end
+
+    context "when given an include_blank option is a string" do
+      it "returns include_blank and placeholder options with the given string" do
+        customer = create(:customer, territory: nil)
+        association = Administrate::Field::BelongsTo.with_options(
+          include_blank: "Select an option"
+        )
+        field = association.new(
+          :territory,
+          [],
+          :edit,
+          resource: customer
+        )
+
+        tag_options = field.tag_options
+        html_options = field.html_options
+
+        expect(tag_options[:include_blank]).to eq("Select an option")
+        expect(html_options[:placeholder]).to eq("Select an option")
+        expect(html_options.dig(:data, :"selectize-required")).to be_nil
+      end
+    end
+
+    context "when given an include_blank option is false" do
+      it "returns include_blank and placeholder options with nil" do
+        customer = create(:customer, territory: nil)
+        association = Administrate::Field::BelongsTo.with_options(
+          include_blank: false
+        )
+        field = association.new(
+          :territory,
+          [],
+          :edit,
+          resource: customer
+        )
+
+        tag_options = field.tag_options
+        html_options = field.html_options
+
+        expect(tag_options[:include_blank]).to eq(nil)
+        expect(html_options[:placeholder]).to eq(nil)
+        expect(html_options.dig(:data, :"selectize-required")).to eq(true)
+      end
+    end
   end
 
   describe "primary_key option" do

spec/lib/fields/select_spec.rb

@@ -140,4 +140,66 @@
       expect(field.selectable_options).to eq([])
     end
   end
+
+  describe ":include_blank option" do
+    context "when given an include_blank option is true" do
+      it "returns include_blank and placeholder options with '---'" do
+        customer = create(:customer)
+        field = described_class.new(
+          :email_subscriber,
+          "yes",
+          :_page_,
+          resource: customer,
+          include_blank: true
+        )
+
+        tag_options = field.tag_options
+        html_options = field.html_options
+
+        expect(tag_options[:include_blank]).to eq("---")
+        expect(html_options[:placeholder]).to eq("---")
+        expect(html_options.dig(:data, :"selectize-required")).to be_nil
+      end
+    end
+
+    context "when given an include_blank option is a string" do
+      it "returns include_blank and placeholder options with the given string" do
+        customer = create(:customer)
+        field = described_class.new(
+          :email_subscriber,
+          "yes",
+          :_page_,
+          resource: customer,
+          include_blank: "Select an option"
+        )
+
+        tag_options = field.tag_options
+        html_options = field.html_options
+
+        expect(tag_options[:include_blank]).to eq("Select an option")
+        expect(html_options[:placeholder]).to eq("Select an option")
+        expect(html_options.dig(:data, :"selectize-required")).to be_nil
+      end
+    end
+
+    context "when given an include_blank option is false" do
+      it "returns include_blank and placeholder options with nil" do
+        customer = create(:customer)
+        field = described_class.new(
+          :email_subscriber,
+          "yes",
+          :_page_,
+          resource: customer,
+          include_blank: false
+        )
+
+        tag_options = field.tag_options
+        html_options = field.html_options
+
+        expect(tag_options[:include_blank]).to be_nil
+        expect(html_options[:placeholder]).to be_nil
+        expect(html_options.dig(:data, :"selectize-required")).to eq(true)
+      end
+    end
+  end
 end