Support custom placeholder value

Hmm, but this isn't useful until we get Tom-Select to work the way we want..

To do that, I think we'd ned to hook into TS to clear the current selection when focused, then set it back upon blur (if no selection was made). Hmm, but we still want it to show slected in the dropdown list.
Can we do it with css maybe?

app/views/admin/products_v3/_filters.html.haml

@@ -7,12 +7,12 @@
       = label_tag :producer_id, t('.producers.label')
       = select_tag :producer_id, options_for_select(producer_options, producer_id),
         include_blank: t('.all_producers'), class: "fullwidth",
-        data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }'}
+        data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', 'tom-select-placeholder-value': t('.search_for_producers')}
   .categories
     = label_tag :category_id, t('.categories.label')
     = select_tag :category_id, options_for_select(category_options, category_id),
       include_blank: t('.all_categories'), class: "fullwidth",
-      data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }'}
+      data: { "controller": "tom-select", "tom-select-options-value": '{ "plugins": [] }', 'tom-select-placeholder-value': t('.search_for_categories')}
   .submit
     .search-button
       = button_tag t(".search"), class: "secondary icon-search relaxed"

app/webpacker/controllers/tom_select_controller.js

@@ -2,16 +2,17 @@ import { Controller } from "stimulus";
 import TomSelect from "tom-select/dist/esm/tom-select.complete";
 
 export default class extends Controller {
-  static values = { options: Object };
+  static values = { options: Object, placeholder: String };
 
   connect(options = {}) {
+    console.log(this.element, this.placeholderValue);
     this.control = new TomSelect(this.element, {
       maxItems: 1,
       maxOptions: null,
       plugins: ["dropdown_input"],
-      allowEmptyOption: !this.#placeholder(),
+      allowEmptyOption: true, // Show blank option (option with empty value)
       closeAfterSelect: true,
-      placeholder: this.#placeholder(),
+      placeholder: this.placeholderValue || this.#emptyOption(),
       onItemAdd: function () {
         this.setTextboxValue("");
       },
@@ -26,7 +27,7 @@ export default class extends Controller {
 
   // private
 
-  #placeholder() {
+  #emptyOption() {
     const optionsArray = [...this.element.options];
     return optionsArray.find((option) => [null, ""].includes(option.value))?.text;
   }

config/locales/en.yml

@@ -824,7 +824,9 @@ en:
           clear_search: Clear search
       filters:
         search_products: Search for products
+        search_for_producers: Search for producers
         all_producers: All producers
+        search_for_categories: Search for categories
         all_categories: All categories
         producers:
           label: Producers