From 53c49050a6b1521884b376b5494a721f717471f7 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 5 Dec 2023 17:17:54 +1100
Subject: [PATCH 01/15] Use body font size on all form inputs

---
 app/webpacker/css/admin_v3/components/select2.scss    | 9 ---------
 app/webpacker/css/admin_v3/components/tom_select.scss | 2 ++
 app/webpacker/css/admin_v3/shared/forms.scss          | 1 -
 3 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index 5751802972..e9078a9051 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -11,7 +11,6 @@
     box-shadow: none !important;
     @include border-radius($border-radius);
     color: $color-1 !important;
-    font-size: 90%;
     height: 31px;
     line-height: inherit !important;
     padding: 5px 15px 7px;
@@ -23,7 +22,6 @@
 
     .select2-search-choice-close {
       background-image: none !important;
-      font-size: 100% !important;
       @extend .icon-remove;
       @extend [class^="icon-"], :before;
       margin-top: 2px;
@@ -54,7 +52,6 @@
 .select2-search {
   @extend .icon-search;
 
-  font-size: 100%;
   color: darken($color-border, 15);
   padding: 0 9px 0 0;
 
@@ -72,7 +69,6 @@
     padding: 6px 0 6px 25px;
     margin: 5px 0 0 5px;
     font-family: $base-font-family;
-    font-size: 90%;
     box-shadow: none;
     background-image: none;
   }
@@ -102,8 +98,6 @@
   padding-left: 0 !important;
 
   li {
-    font-size: 85% !important;
-
     &.select2-highlighted {
       .select2-result-label {
         &,
@@ -160,7 +154,6 @@
       border: none;
       box-shadow: none;
       color: $color-1 !important;
-      font-size: 85%;
 
       &:hover {
         background-color: $color-btn-hover-bg;
@@ -168,7 +161,6 @@
 
       .select2-search-choice-close {
         background-image: none !important;
-        font-size: 85% !important;
         @extend .icon-remove;
         @extend [class^="icon-"], :before;
         margin-left: 2px;
@@ -248,7 +240,6 @@ label .select2-container {
         top: 0;
         margin: 0;
         padding: 0;
-        font-size: 100% !important;
       }
     }
   }
diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index cf250c5b94..35a9d801d3 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -22,6 +22,8 @@
     @include border-radius($border-radius);
 
     input {
+      font-size: $body-font-size;
+
       &::placeholder {
         color: $near-black;
       }
diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
index 90ae20cf3f..4a4980f0ec 100644
--- a/app/webpacker/css/admin_v3/shared/forms.scss
+++ b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -19,7 +19,6 @@ fieldset {
   padding: $vpadding-txt $hpadding-txt;
   border: 1px solid $lighter-grey;
   color: $color-txt-text;
-  font-size: 90%;
   background-color: $lighter-grey;
 
   &:focus {

From 05582b3d2d41c34f1adb288cd152038e367509c9 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 12 Dec 2023 15:23:45 +1100
Subject: [PATCH 02/15] Fix display of single-select dropdowns

---
 app/views/admin/products_v3/_sort.html.haml   |  2 +-
 .../css/admin_v3/components/tom_select.scss   | 34 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml
index d3b4829f84..4bad2f9d75 100644
--- a/app/views/admin/products_v3/_sort.html.haml
+++ b/app/views/admin/products_v3/_sort.html.haml
@@ -6,4 +6,4 @@
         = t(".pagination.clear_search")  
   %form.with-dropdown
     = t(".pagination.per_page.show")
-    = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), data: { reflex: "change->products#change_per_page" }
+    = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), class: "no-input", data: { reflex: "change->products#change_per_page", controller: "tom-select", "tom-select-options-value": '{ "plugins": [] }'}
diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 35a9d801d3..9217135c14 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -1,3 +1,9 @@
+@mixin hide-input {
+  // Pretend there's no text input (it can't be hidden entirely, in order for tom-select to work)
+  cursor: pointer;
+  caret-color: transparent;
+}
+
 .ts-wrapper.single,
 .ts-wrapper.multi {
   min-height: 40px;
@@ -57,13 +63,35 @@
   }
 }
 
-// For the "single" tom_select, be as clause as native select boxes
+// For the "single" tom_select, be as close as possible to native select boxes
 // without too many options
 .ts-wrapper.single {
   max-height: 40px;
   max-width: 100%;
 
-  &.input-active .ts-control {
-    cursor: pointer;
+  &.has-items {
+    @include hide-input;
+  }
+
+  .ts-control {
+    .item {
+      margin-right: 1rem;
+    }
+  }
+}
+
+// 'no-input' mode, like a native select (hide text input).
+.ts-wrapper.single.no-input {
+  &.input-active .ts-control {
+    @include hide-input;
+  }
+
+  .ts-control {
+    padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
+  }
+
+  .ts-dropdown {
+    position: absolute;
+    top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown
   }
 }

From 3fbd5f6357ec9d671e61bb7506b5b12e4ce4738c Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Fri, 8 Dec 2023 17:40:56 +1100
Subject: [PATCH 03/15] Style single-select as per design

---
 .../css/admin_v3/components/tom_select.scss   | 20 ++++++++++++++++---
 .../css/admin_v3/globals/variables.scss       |  3 +++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 9217135c14..9a5fe2e4d9 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -10,7 +10,8 @@
 
   &.input-active {
     .ts-control {
-      border-color: $lighter-grey;
+      border-color: $orient;
+      background-color: $lighter-grey;
 
       input {
         &::placeholder {
@@ -29,20 +30,32 @@
 
     input {
       font-size: $body-font-size;
+      height: auto;
 
       &::placeholder {
         color: $near-black;
       }
     }
+
+    .item {
+      margin-top: 2px; // Ensure it lines up with the input. I have no idea why it's necessary.
+    }
   }
 
   .ts-dropdown {
+    margin-top: 4px;
+    color: $near-black;
     @include border-radius($border-radius);
     border: none;
-    box-shadow: none;
-    color: $near-black;
+    box-shadow: $shadow-dropdown;
+
+    .ts-dropdown-content {
+      padding: $border-radius 0;
+    }
 
     .option {
+      padding: 8px;
+
       &.selected {
         border-left: 2px solid $orient;
       }
@@ -93,5 +106,6 @@
   .ts-dropdown {
     position: absolute;
     top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown
+    margin-top: 0;
   }
 }
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index e41f2a9597..8686fe85d8 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -74,6 +74,9 @@ $color-action-save-brd:          very-light($color-success, 20 ) !default;
 $color-action-mail-bg:           very-light($color-success, 5  ) !default;
 $color-action-mail-brd:          very-light($color-success, 20 ) !default;
 
+// Dropdown styles
+$shadow-dropdown:                0px 0px 8px 0px rgba($near-black, 0.25);
+
 // Select2 select field colors
 $color-sel-bg:                   $lighter-grey !default;
 $color-sel-hover-bg:             $lighter-grey !default;

From 0efda02b9b07f55cdf2ba435822a0b7936d4ae9e Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 12 Dec 2023 15:32:31 +1100
Subject: [PATCH 04/15] Style list items as per design

---
 app/webpacker/css/admin_v3/components/tom_select.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 9a5fe2e4d9..2eb2153eb7 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -55,12 +55,12 @@
 
     .option {
       padding: 8px;
+      border-left: 3px solid transparent;
+      line-height: 20px;
 
-      &.selected {
-        border-left: 2px solid $orient;
-      }
-
+      &.selected,
       &.active {
+        border-left: 3px solid $orient;
         background-color: $lighter-grey;
         color: $near-black;
       }

From 1776420d4a0d3c0e3b6ac589638c1dda8ad21671 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 13 Dec 2023 17:24:03 +1100
Subject: [PATCH 05/15] Clip long content with ellipsis

---
 .../css/admin_v3/components/tom_select.scss       | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 2eb2153eb7..675217e865 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -87,8 +87,19 @@
   }
 
   .ts-control {
+    padding-right: 0.5rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
+    overflow: hidden;
+
+    &:not(.rtl)::after {
+      right: 0.5rem;
+    }
+
     .item {
       margin-right: 1rem;
+      // Hide overflow with an ellipsis if a width has been set
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-wrap: nowrap;
     }
   }
 }
@@ -99,10 +110,6 @@
     @include hide-input;
   }
 
-  .ts-control {
-    padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
-  }
-
   .ts-dropdown {
     position: absolute;
     top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown

From f29c1d57979efd1a297807d3e4c76dced4daea25 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 14 Dec 2023 13:28:16 +1100
Subject: [PATCH 06/15] Use chevron for dropdown icon

We should be able to use @extend .icon-chevron-down, but I couldn't get it to work. I'd like to have a better method for this, but we should upgrade our ancient FontAwesome before worrying about that.
---
 .../css/admin_v3/components/tom_select.scss    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 675217e865..4d335c80c0 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -87,11 +87,19 @@
   }
 
   .ts-control {
-    padding-right: 0.5rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
+    padding: 0.5rem 0.75rem;
+    padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
     overflow: hidden;
 
+    // Icon: Override TS icon with icon-chevron-down
+    &::after {
+      content: "\f078";
+      font-family: FontAwesome;
+      border: none;
+      top: 1em;
+    }
     &:not(.rtl)::after {
-      right: 0.5rem;
+      right: 1.5rem;
     }
 
     .item {
@@ -102,6 +110,12 @@
       text-wrap: nowrap;
     }
   }
+
+  &.dropdown-active .ts-control {
+    &::after {
+      content: "\f077"; // chevron-up
+    }
+  }
 }
 
 // 'no-input' mode, like a native select (hide text input).

From ad797de1a6101608775a58352513190fd9435642 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 14 Dec 2023 13:49:04 +1100
Subject: [PATCH 07/15] Responsive sizing for elements

The query input can grow to fill the space.
---
 app/views/admin/products_v3/_sort.html.haml |  2 +-
 app/webpacker/css/admin/products_v3.scss    | 22 +++++++++------------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml
index 4bad2f9d75..b89d926cef 100644
--- a/app/views/admin/products_v3/_sort.html.haml
+++ b/app/views/admin/products_v3/_sort.html.haml
@@ -6,4 +6,4 @@
         = t(".pagination.clear_search")  
   %form.with-dropdown
     = t(".pagination.per_page.show")
-    = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), class: "no-input", data: { reflex: "change->products#change_per_page", controller: "tom-select", "tom-select-options-value": '{ "plugins": [] }'}
+    = select_tag :per_page, options_for_select([15, 25, 50, 100].collect{|i| [t('.pagination.per_page.per_page', num: i), i]}, pagy.items), class: "no-input per-page", data: { reflex: "change->products#change_per_page", controller: "tom-select", "tom-select-options-value": '{ "plugins": [] }'}
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index f8d9a8272f..9c57e3670a 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -178,29 +178,28 @@
       align-items: center;
       gap: 10px;
     }
+    .per-page {
+      width: 10em;
+    }
   }
 
   #filters {
-    display: grid;
-    grid-template-columns: repeat(6, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: 20px;
+    display: flex;
+    column-gap: 20px;
     align-items: end;
     margin-bottom: 20px;
 
     .query {
-      grid-column: 1 / span 3;
+      flex-grow: 1;
     }
 
     .producers,
     .categories {
     }
 
-    .submit {
-      grid-column: 6 / span 1;
-    }
-
     .query {
+      min-width: 15em;
+
       .search-input {
         width: 100%;
         position: relative;
@@ -234,10 +233,7 @@
 
     .producers,
     .categories {
-      select {
-        width: 150px;
-        height: $btn-relaxed-height;
-      }
+      width: 15em;
     }
 
     .submit {

From a5b2a24dc22c6eb60e403421cf84cf5fefe75c16 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 14 Dec 2023 14:12:24 +1100
Subject: [PATCH 08/15] Refactor: Code cleanup

---
 app/webpacker/css/admin/products_v3.scss | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 9c57e3670a..70e59cef99 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -166,9 +166,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-  }
 
-  #sort {
     line-height: $btn-relaxed-height;
     height: $btn-relaxed-height;
 
@@ -191,13 +189,6 @@
 
     .query {
       flex-grow: 1;
-    }
-
-    .producers,
-    .categories {
-    }
-
-    .query {
       min-width: 15em;
 
       .search-input {

From e578f697f5c85bbf5968fc37f68894ac227731df Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 12 Dec 2023 16:38:03 +1100
Subject: [PATCH 09/15] Refactor: use data hash

---
 app/views/admin/products_v3/_filters.html.haml | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index c1d61bf7bf..8ccb44d899 100644
--- a/app/views/admin/products_v3/_filters.html.haml
+++ b/app/views/admin/products_v3/_filters.html.haml
@@ -5,10 +5,14 @@
   - if producer_options.many?
     .producers
       = label_tag :producer_id, t('.producers.label')
-      = select_tag :producer_id, options_for_select(producer_options, producer_id), include_blank: t('.all_producers'), "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
+      = 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": [] }'}
   .categories
     = label_tag :category_id, t('.categories.label')
-    = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories'),  "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
+    = 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": [] }'}
   .submit
     .search-button
       = button_tag t(".search"), class: "secondary icon-search relaxed"

From 2756e37603a8d1ccfa73ee5a5f0e96d88e17c6d8 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 12 Dec 2023 16:39:01 +1100
Subject: [PATCH 10/15] Placeholder style

---
 app/webpacker/css/admin_v3/components/tom_select.scss | 2 +-
 app/webpacker/css/admin_v3/globals/palette.scss       | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 4d335c80c0..74e6c19c6b 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -15,7 +15,7 @@
 
       input {
         &::placeholder {
-          color: $light-grey;
+          color: $medium-light-grey;
         }
       }
     }
diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss
index 59b3c88c3a..b56ca9c426 100644
--- a/app/webpacker/css/admin_v3/globals/palette.scss
+++ b/app/webpacker/css/admin_v3/globals/palette.scss
@@ -11,6 +11,7 @@ $yellow: #ff9300 !default; // Yellow
 $mystic: #d9e8eb !default; // Mystic
 $lighter-grey: #f8f9fa !default; // Lighter grey
 $light-grey: #eff1f2 !default; // Light grey (Porcelain)
+$medium-light-grey: #babdbe !default; // Silver Sand
 $medium-grey: #919191 !default; // Medium grey
 $dark-grey: #2e3132 !default; // Dark Grey
 $near-black: #191c1d !default; // Near-black (Shark)

From e8266ba3ae769be2d323dd5192da87016bdb0079 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Tue, 12 Dec 2023 16:45:49 +1100
Subject: [PATCH 11/15] Refactor

---
 .../controllers/tom_select_controller.js      | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/app/webpacker/controllers/tom_select_controller.js b/app/webpacker/controllers/tom_select_controller.js
index 9cf4401fe6..1022b788d4 100644
--- a/app/webpacker/controllers/tom_select_controller.js
+++ b/app/webpacker/controllers/tom_select_controller.js
@@ -3,25 +3,18 @@ import TomSelect from "tom-select/dist/esm/tom-select.complete";
 
 export default class extends Controller {
   static values = { options: Object };
-  static defaults = {
-    maxItems: 1,
-    maxOptions: null,
-    plugins: ["dropdown_input"],
-    allowEmptyOption: true,
-    closeAfterSelect: true,
-    onItemAdd: function () {
-      this.setTextboxValue("");
-    },
-  };
 
   connect(options = {}) {
-    if (this.#placeholder()) {
-      options.allowEmptyOption = false;
-      options.placeholder = this.#placeholder();
-    }
-
     this.control = new TomSelect(this.element, {
-      ...this.constructor.defaults,
+      maxItems: 1,
+      maxOptions: null,
+      plugins: ["dropdown_input"],
+      allowEmptyOption: !this.#placeholder(),
+      closeAfterSelect: true,
+      placeholder: this.#placeholder(),
+      onItemAdd: function () {
+        this.setTextboxValue("");
+      },
       ...this.optionsValue,
       ...options,
     });

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 12/15] 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

From 2cbe9a42689fa79a507ffcd1290517b67c2b1bcc Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 14 Dec 2023 14:53:52 +1100
Subject: [PATCH 13/15] Style tom-select dropdown-input to appear over the main
 control

It's more compact, and we don't need to see the currently selected value because it's highlighted in the list already.
---
 .../admin/products_v3/_filters.html.haml      |  4 +-
 .../css/admin_v3/components/tom_select.scss   | 59 +++++++++++--------
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index cfd723b8b0..e413f481d3 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": [] }', 'tom-select-placeholder-value': t('.search_for_producers')}
+        data: { "controller": "tom-select", '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": [] }', 'tom-select-placeholder-value': t('.search_for_categories')}
+      data: { "controller": "tom-select", '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/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 74e6c19c6b..699b8f6531 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -1,9 +1,3 @@
-@mixin hide-input {
-  // Pretend there's no text input (it can't be hidden entirely, in order for tom-select to work)
-  cursor: pointer;
-  caret-color: transparent;
-}
-
 .ts-wrapper.single,
 .ts-wrapper.multi {
   min-height: 40px;
@@ -43,16 +37,20 @@
   }
 
   .ts-dropdown {
+    // Unstyled, we style the dropdown-content instead
+    margin: 0;
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .ts-dropdown-content {
     margin-top: 4px;
     color: $near-black;
+    background-color: $color-body-bg;
     @include border-radius($border-radius);
-    border: none;
     box-shadow: $shadow-dropdown;
 
-    .ts-dropdown-content {
-      padding: $border-radius 0;
-    }
-
     .option {
       padding: 8px;
       border-left: 3px solid transparent;
@@ -68,11 +66,31 @@
   }
 }
 
-.plugin-dropdown_input .dropdown-input {
-  border-color: $lighter-grey;
+.plugin-dropdown_input {
+  .ts-dropdown {
+    // Cover up the control with the input
+    top: 0;
+  }
 
-  &:focus {
-    border-color: $orient;
+  .dropdown-input-wrap::after {
+    position: absolute;
+    content: "\f077"; // chevron-up
+    font-family: FontAwesome;
+    border: none;
+    top: 0.7rem;
+    right: 0.7rem;
+    font-size: 13px;
+  }
+
+  .dropdown-input {
+    background-color: $color-body-bg;
+    border: 1px solid $lighter-grey;
+    box-shadow: none;
+    padding: 0.5rem 0.75rem;
+
+    &:focus {
+      border: 1px solid $orient;
+    }
   }
 }
 
@@ -82,10 +100,6 @@
   max-height: 40px;
   max-width: 100%;
 
-  &.has-items {
-    @include hide-input;
-  }
-
   .ts-control {
     padding: 0.5rem 0.75rem;
     padding-right: 1rem !important; // ts has a clever variable-based rule here, but it doesn't seem to work right.
@@ -120,13 +134,12 @@
 
 // 'no-input' mode, like a native select (hide text input).
 .ts-wrapper.single.no-input {
-  &.input-active .ts-control {
-    @include hide-input;
-  }
-
   .ts-dropdown {
     position: absolute;
     top: 0; // we don't need to see the currently selected option, because it's visible in the dropdown
+  }
+
+  .ts-dropdown-content {
     margin-top: 0;
   }
 }

From 37a1776c7e71b7c8c4f8945e3e26722b2153e235 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 14 Dec 2023 15:17:55 +1100
Subject: [PATCH 14/15] Prevent scrollbars on select2 item

This is unrelated to the rest of the PR, I just noticed this issue so decided to fix it. I can't find any explanation, or think of any good reason for this rule, so I'm burning it.
---
 app/webpacker/css/admin_v3/components/select2.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index e9078a9051..d42fc66d6b 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -111,7 +111,6 @@
       color: $color-body-text;
       min-height: 22px;
       clear: both;
-      overflow: auto;
     }
 
     &.select2-no-results,

From 443b3134df7a2dc3d89e8b99a09ab27729fd3d62 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 10 Jan 2024 14:22:26 +1100
Subject: [PATCH 15/15] Tweak padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I'm not sure why this requires extra padding here, but it looks good 🤷

Co-authored-by: Mario Carabotta <6696729+mariocarabotta@users.noreply.github.com>
---
 app/webpacker/css/admin_v3/components/tom_select.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/tom_select.scss b/app/webpacker/css/admin_v3/components/tom_select.scss
index 699b8f6531..dae7f18fd8 100644
--- a/app/webpacker/css/admin_v3/components/tom_select.scss
+++ b/app/webpacker/css/admin_v3/components/tom_select.scss
@@ -86,7 +86,7 @@
     background-color: $color-body-bg;
     border: 1px solid $lighter-grey;
     box-shadow: none;
-    padding: 0.5rem 0.75rem;
+    padding: 0.6rem 0.75rem;
 
     &:focus {
       border: 1px solid $orient;