From b97890b5378d64e00338ebba21e9786ef6044f46 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 12 Dec 2023 16:55:40 +1100
Subject: [PATCH] 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     | 4 ++--
 app/webpacker/controllers/tom_select_controller.js | 9 +++++----
 config/locales/en.yml                              | 2 ++
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index 8ccb44d899..cfd723b8b0 100644
--- a/app/views/admin/products_v3/_filters.html.haml
+++ b/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"
diff --git a/app/webpacker/controllers/tom_select_controller.js b/app/webpacker/controllers/tom_select_controller.js
index 1022b788d4..b9bc433f5c 100644
--- a/app/webpacker/controllers/tom_select_controller.js
+++ b/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;
   }
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9facc4a793..928261c27b 100644
--- a/config/locales/en.yml
+++ b/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