Producers selects are to be populated on focus

- added a new Stimulus controller to display one line selects
 - that are to be populated when getting focus to avoid repeating
 - 10 times same option lists
 - on focus, select is populated by the data stored in template.
 - data that used to be source for each select (and so repeated) is
 - now stored once in a template

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

@@ -1,3 +1,5 @@
+%template{ id: "producer_options"}
+  = options_for_select(producer_options, product.supplier_id)
 %td.with-image{ id: "image-#{product.id}" }
   = render partial: "product_image", locals: { product: }
 %td.field.align-left.header.naked_inputs
@@ -26,12 +28,13 @@
 %td.align-right
   -# empty
 %td.naked_inputs
-  = render(SearchableDropdownComponent.new(form: f,
-      name: :supplier_id,
-      aria_label: t('.producer_field_name'),
-      options: producer_options,
-      selected_option: product.supplier_id,
-      placeholder_value: t('admin.products_v3.filters.search_for_producers')))
+  = f.select :supplier_id,
+    options_for_select([producer_options.find{ |option| option[1] == product.supplier_id }], product.supplier_id),
+    {},
+    class: "fullwidth no-input",
+    'aria-label': t('.producer_field_name'),
+    data: { "controller": "producers-select",
+      "producers-select-placeholder-value": t('admin.products_v3.filters.search_for_producers')}
 %td.align-left
   -# empty
 %td.align-left

app/webpacker/controllers/producers_select_controller.js

@@ -0,0 +1,37 @@
+import TomSelect from "./tom_select_controller";
+
+const minimumOptionsForSearchField = 11;
+
+export default class extends TomSelect {
+  static values = { options: Object, placeholder: String };
+
+  connect(options = {}) {
+    const template = this.template();
+    let additional_options = {};
+    const lines_of_option = template.content.children.length; 
+
+    if (lines_of_option < minimumOptionsForSearchField) {
+      additional_options.plugins = [];  
+    }
+
+    super.connect(additional_options);
+    this.control.on('focus', this.fetchProducers.bind(this));
+  }
+
+  disconnect() {
+    if (this.control) this.control.destroy();
+  }
+  
+  fetchProducers() {
+    if ((Object.keys(this.control.options).length) > 1) return false;
+
+    const template = this.template();
+    Array.from(template.content.children).forEach((option) => {
+      this.control.addOption({value: option.value, text: option.text});
+    }); 
+  }
+  
+  template() {
+    return document.querySelector("#producer_options");
+  }
+}