diff --git a/app/webpacker/controllers/selector_controller.js b/app/webpacker/controllers/selector_controller.js index 83c11a168c..c5311ba583 100644 --- a/app/webpacker/controllers/selector_controller.js +++ b/app/webpacker/controllers/selector_controller.js @@ -1,10 +1,14 @@ import ApplicationController from "./application_controller"; export default class extends ApplicationController { + reflex = "SelectorComponent"; + connect() { super.connect(); window.addEventListener("click", this.closeOnClickOutside); + this.computeItemsHeight(); } + disconnect() { super.disconnect(); window.removeEventListener("click", this.closeOnClickOutside); @@ -12,7 +16,13 @@ export default class extends ApplicationController { closeOnClickOutside = (event) => { if (!this.element.contains(event.target)) { - this.stimulate("SelectorComponent#close", this.element); + this.stimulate(`${this.reflex}#close`, this.element); } }; + + computeItemsHeight = () => { + const items = this.element.querySelector(".selector-items"); + const rect = items.getBoundingClientRect(); + items.style.maxHeight = `calc(100vh - ${rect.height}px)`; + }; } diff --git a/app/webpacker/controllers/super_selector_controller.js b/app/webpacker/controllers/super_selector_controller.js index 918862e1f6..445b0fd16d 100644 --- a/app/webpacker/controllers/super_selector_controller.js +++ b/app/webpacker/controllers/super_selector_controller.js @@ -1,18 +1,5 @@ -import ApplicationController from "./application_controller"; +import SelectorController from "./selector_controller"; -export default class extends ApplicationController { - connect() { - super.connect(); - window.addEventListener("click", this.handleClick); - } - disconnect() { - super.disconnect(); - window.removeEventListener("click", this.handleClick); - } - - handleClick = (event) => { - if (!this.element.contains(event.target)) { - this.stimulate("SuperSelectorComponent#close", this.element); - } - }; +export default class extends SelectorController { + reflex = "SuperSelectorComponent"; }