diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index eb738d3..af302fa 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/src/common/core/BaseElement/BaseElement.ts @@ -8,7 +8,7 @@ class BaseElement extends HTMLElement { @closest appMain: AppMainElement; private _appMain: AppMainElement; public loader: Loader; - private elementDisconnectCallbacks: Array = []; + public elementDisconnectCallbacks: Array = []; constructor() { super(); this.connectedCallback = this.connectedCallback.bind(this); diff --git a/src/components/app-dropdown/AppDropdownElement.ts b/src/components/app-dropdown/AppDropdownElement.ts index 4165923..554ba11 100644 --- a/src/components/app-dropdown/AppDropdownElement.ts +++ b/src/components/app-dropdown/AppDropdownElement.ts @@ -46,6 +46,11 @@ class AppDropdownElement extends BaseComponentElement { this.validator = new Validator(this, this.appForm, this.rules); this.randId = `${name}${randomId()}`; this.update(); + this.appMain.addEventListener('click', this.outsideClick); + this.elementDisconnectCallbacks.push((appMain) => { + console.log('oslo'); + appMain.removeEventListener('click', this.outsideClick); + }); const options = { rpp: this.rpp, @@ -54,6 +59,13 @@ class AppDropdownElement extends BaseComponentElement { this.getItems(options); }; + elementDisconnected = (): void => {}; + + outsideClick = (e) => { + console.log(e.target); + this.closeDropdown(e); + }; + attributeChangedCallback(): void { this.update(); } @@ -135,10 +147,16 @@ class AppDropdownElement extends BaseComponentElement { this.isOpen = isOpen; }; - openDropdown = () => { + openDropdown = (e?) => { + if (e?.target?.closest('app-dropdown > .dropdown-custom')?.randId == this.randId) return; this.setOpen(true); }; + closeDropdown = (e?) => { + if (e?.target?.closest('app-dropdown')?.randId == this.randId) return; + this.setOpen(false); + }; + stopPropagation = (e) => { e.stopPropagation(); }; @@ -179,9 +197,9 @@ class AppDropdownElement extends BaseComponentElement { return html`
-