Toggle is now controlled by the browser (and don't requires a reflex)

app/components/selector_component.rb

@@ -12,15 +12,6 @@ class SelectorComponent < ViewComponentReflex::Component
       }
     end
     @selected = selected
-    @state = :close
     @data = data
   end
-
-  def toggle
-    @state = @state == :open ? :close : :open
-  end
-
-  def close
-    @state = :close
-  end
 end

app/components/selector_component/selector_component.html.haml

@@ -1,6 +1,6 @@
 = component_controller do
-  .selector{ class: ("selector-close" if @state == :close) }
-    .selector-main{data: reflex_data_attributes(:toggle)}
+  .selector
+    .selector-main{ data: { action: "click->selector#toggle" } }
       .selector-main-title 
         = @title
       .selector-arrow

app/webpacker/controllers/selector_controller.js

@@ -1,8 +1,6 @@
 import ApplicationController from "./application_controller";
 
 export default class extends ApplicationController {
-  reflex = "SelectorComponent";
-
   connect() {
     super.connect();
     window.addEventListener("click", this.closeOnClickOutside);
@@ -14,16 +12,26 @@ export default class extends ApplicationController {
     window.removeEventListener("click", this.closeOnClickOutside);
   }
 
+  initialize() {
+    this.close();
+  }
+
   afterReflex() {
     this.computeItemsHeight();
   }
 
+  toggle = (event) => {
+    event.preventDefault();
+    this.element.querySelector(".selector").classList.toggle("selector-close");
+  };
+
+  // Private
   closeOnClickOutside = (event) => {
     if (
       !this.element.contains(event.target) &&
       this.isVisible(this.element.querySelector(".selector-wrapper"))
     ) {
-      this.stimulate(`${this.reflex}#close`, this.element);
+      this.close();
     }
   };
 
@@ -37,4 +45,8 @@ export default class extends ApplicationController {
     const style = window.getComputedStyle(element);
     return style.display !== "none" && style.visibility !== "hidden";
   };
+
+  close = () => {
+    this.element.querySelector(".selector").classList.add("selector-close");
+  };
 }