From 3cf01623da4f1f9e6e4bc4271725e055b29e2a0b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Apr 2022 15:39:47 +0200
Subject: [PATCH] Handle filtering on js controller for SelectorWithFilter

---
 .../selector_with_filter_component.rb           | 17 +----------------
 .../selector_with_filter_component.html.haml    |  6 +++---
 .../selector_with_filter_controller.js          | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/app/components/selector_with_filter_component.rb b/app/components/selector_with_filter_component.rb
index cec7800941..cae5182ce3 100644
--- a/app/components/selector_with_filter_component.rb
+++ b/app/components/selector_with_filter_component.rb
@@ -4,23 +4,8 @@ class SelectorWithFilterComponent < SelectorComponent
   def initialize(title:, selected:, items:, data: {},
                  selected_items_i18n_key: 'components.selector_with_filter.selected_items')
     super(title: title, selected: selected, items: items, data: data)
-    @query = ""
     @selected_items = items.select { |item| @selected.include?(item[:value]) }
     @selected_items_i18n_key = selected_items_i18n_key
-
-    filter_items
-  end
-
-  def search
-    @query = element.value
-    filter_items
-  end
-
-  def filter_items
-    @filtered_items = if @query.empty?
-                        @items
-                      else
-                        @items.select { |item| item[:label].downcase.include?(@query.downcase) }
-                      end
+    @items = items
   end
 end
diff --git a/app/components/selector_with_filter_component/selector_with_filter_component.html.haml b/app/components/selector_with_filter_component/selector_with_filter_component.html.haml
index 7d71aef149..f249846ccf 100644
--- a/app/components/selector_with_filter_component/selector_with_filter_component.html.haml
+++ b/app/components/selector_with_filter_component/selector_with_filter_component.html.haml
@@ -15,8 +15,8 @@
       .selector-arrow
     .selector-wrapper
       .super-selector-search
-        %input{type: "text", placeholder: t("components.selector_with_filter.search_placeholder"), data: reflex_data_attributes("debounced:input->search"), value: @query}
+        %input{type: "text", placeholder: t("components.selector_with_filter.search_placeholder"), data: { action: "debounced:input->selector-with-filter#filter" } }
       .selector-items
-        - @filtered_items.each do |item|
-          .selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] }
+        - @items.each do |item|
+          .selector-item{ class: ("selected" if item[:selected]), data: @data.merge({ "selector-with-filter-target": "items" }), "data-value": item[:value] }
             = item[:label]
diff --git a/app/webpacker/controllers/selector_with_filter_controller.js b/app/webpacker/controllers/selector_with_filter_controller.js
index 310b23353a..dc049305b6 100644
--- a/app/webpacker/controllers/selector_with_filter_controller.js
+++ b/app/webpacker/controllers/selector_with_filter_controller.js
@@ -1,3 +1,15 @@
 import SelectorController from "./selector_controller";
 
-export default class extends SelectorController {}
+export default class extends SelectorController {
+  static targets = ["items"];
+
+  filter = (event) => {
+    const query = event.target.value;
+
+    this.itemsTargets.forEach((el, i) => {
+      el.style.display = el.textContent.toLowerCase().includes(query)
+        ? ""
+        : "none";
+    });
+  };
+}