diff --git a/app/components/selector_component.rb b/app/components/selector_component.rb index 4837abb318..daa81d7663 100644 --- a/app/components/selector_component.rb +++ b/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 diff --git a/app/components/selector_component/selector_component.html.haml b/app/components/selector_component/selector_component.html.haml index c1c9728415..bf56712d59 100644 --- a/app/components/selector_component/selector_component.html.haml +++ b/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 diff --git a/app/webpacker/controllers/selector_controller.js b/app/webpacker/controllers/selector_controller.js index d2eb881bfc..cce4241643 100644 --- a/app/webpacker/controllers/selector_controller.js +++ b/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"); + }; }