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

Add placeholders to business address country and state select fields

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;
+  }
 }