Merge pull request #10614 from cillian/business-address-country-state-placeholders

Add placeholders to business address country and state select fields

app/views/admin/enterprises/form/_business_address.html.haml

@@ -42,10 +42,10 @@
     = bf.label :state_id, t(:state)
     %span.required *
   .four.columns
-    = bf.select :country_id, options_for_select(available_countries.map { |c| [c.name, c.id] }, @enterprise.business_address.country_id), {}, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
+    = bf.select :country_id, options_for_select(available_countries.map { |c| [c.name, c.id] }, @enterprise.business_address.country_id), { include_blank: t(".select_country") }, { "data-controller": "tom-select", "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange", class: "primary" }
   .four.columns.omega
     - states = @enterprise.business_address.country.present? ? @enterprise.business_address.country&.states&.map { |s| [s.name, s.id] } : []
-    = bf.select :state_id, states, {}, { "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
+    = bf.select :state_id, states, { include_blank: t(".select_state") }, { disabled: @enterprise.business_address.country_id.nil?, "data-controller": "tom-select", "data-dependent-select-target": "select", class: "primary" }
 
 .row
   .three.columns.alpha

app/webpacker/controllers/dependent_select_controller.js

@@ -11,6 +11,7 @@ export default class extends Controller {
   // private
 
   populateSelect(sourceId) {
+    this.tomselect = this.selectTarget.tomselect;
     this.removeCurrentOptions();
     this.populateNewOptions(sourceId);
   }
@@ -18,8 +19,12 @@ export default class extends Controller {
   removeCurrentOptions() {
     this.selectTarget.innerHTML = "";
 
-    this.selectTarget.tomselect?.clear();
-    this.selectTarget.tomselect?.clearOptions();
+    if (!this.tomselect) {
+      return;
+    }
+
+    this.tomselect.clear();
+    this.tomselect.clearOptions();
   }
 
   populateNewOptions(sourceId) {
@@ -29,8 +34,18 @@ export default class extends Controller {
       this.addOption(item[0], item[1]);
     });
 
-    this.selectTarget.tomselect?.sync();
-    this.selectTarget.tomselect?.addItem(options[0]?.[1]);
+    if (!this.tomselect) {
+      return;
+    }
+
+    if (options.length == 0) {
+      this.tomselect.disable();
+    } else {
+      this.tomselect.enable();
+      this.tomselect.addItem(options[0]?.[1]);
+      this.tomselect.sync();
+      this.tomselect.setValue(null);
+    }
   }
 
   addOption(label, value) {
@@ -41,6 +56,7 @@ export default class extends Controller {
   }
 
   dependentOptionsFor(sourceId) {
-    return this.optionsValue.find((option) => option[0] === sourceId)[1];
+    let options = this.optionsValue.find((option) => option[0] === sourceId);
+    return options ? options[1] : [];
   }
 }

app/webpacker/controllers/tom_select_controller.js

@@ -14,6 +14,11 @@ export default class extends Controller {
   };
 
   connect(options = {}) {
+    if (this.#placeholder()) {
+      options.allowEmptyOption = false;
+      options.placeholder = this.#placeholder();
+    }
+
     this.control = new TomSelect(this.element, {
       ...this.constructor.defaults,
       ...this.optionsValue,
@@ -24,4 +29,12 @@ export default class extends Controller {
   disconnect() {
     if (this.control) this.control.destroy();
   }
+
+  // private
+
+  #placeholder() {
+    const optionsArray = [...this.element.options];
+    return optionsArray.find((option) => [null, ""].includes(option.value))
+      ?.text;
+  }
 }

config/locales/en.yml

@@ -960,6 +960,8 @@ en:
           address2: Address (contd.)
           legal_phone_number: Legal phone number
           phone_placeholder: "98 123 4565"
+          select_country: "Select Country"
+          select_state: "Select State"
         contact:
           legend: "Contact"
           name: Name