diff --git a/packages/organization-select/src/organization-select.js b/packages/organization-select/src/organization-select.js index ee212b9d54c2f1051e4e3392968da41f10f2fa64..578fb010fe32216d2bb8d3da1d99a034bbe52c63 100644 --- a/packages/organization-select/src/organization-select.js +++ b/packages/organization-select/src/organization-select.js @@ -25,6 +25,8 @@ export class OrganizationSelect extends AdapterLitElement { this.cache = {}; this.value = ''; this.context = ''; + + this._onDocumentClicked = this._onDocumentClicked.bind(this); } static get properties() { @@ -48,16 +50,13 @@ export class OrganizationSelect extends AdapterLitElement { connectedCallback() { super.connectedCallback(); + document.addEventListener('click', this._onDocumentClicked); this.updateSelect2(); + } - this.updateComplete.then(()=> { - // Close the popup when clicking outside of select2 - document.addEventListener('click', (ev) => { - if (!ev.composedPath().includes(this)) { - this._closeSelect2(); - } - }); - }); + disconnectedCallback() { + document.removeEventListener('click', this._onDocumentClicked); + super.disconnectedCallback(); } async load_organizations() { @@ -71,11 +70,13 @@ export class OrganizationSelect extends AdapterLitElement { return this.cache[this.lang] === undefined; } - _closeSelect2() { - const $select = this.$('#' + this.selectId); - console.assert($select.length, "select2 missing"); - if (this.select2IsInitialized($select)) { - $select.select2('close'); + _onDocumentClicked(ev) { + // Close the popup when clicking outside of select2 + if (!ev.composedPath().includes(this)) { + const $select = this.$('#' + this.selectId); + if ($select.length && this.select2IsInitialized($select)) { + $select.select2('close'); + } } } diff --git a/packages/person-select/src/person-select.js b/packages/person-select/src/person-select.js index 02df24f871e607957eff01c41573f2ca0a5813b5..67c7466650d0c0ce0cda1ce440c9454de18d6a52 100644 --- a/packages/person-select/src/person-select.js +++ b/packages/person-select/src/person-select.js @@ -44,6 +44,8 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { this.showReloadButton = false; this.reloadButtonTitle = ''; this.showDetails = false; + + this._onDocumentClicked = this._onDocumentClicked.bind(this); } static get scopedElements() { @@ -84,28 +86,27 @@ export class PersonSelect extends ScopedElementsMixin(AdapterLitElement) { connectedCallback() { super.connectedCallback(); - const that = this; + document.addEventListener('click', this._onDocumentClicked); this.updateComplete.then(()=>{ - that.$select = that.$('#' + that.selectId); - - // Close the popup when clicking outside of select2 - document.addEventListener('click', (ev) => { - if (!ev.composedPath().includes(this)) { - this._closeSelect2(); - } - }); - + this.$select = this.$('#' + this.selectId); // try an init when user-interface is loaded - that.initJSONLD(); + this.initJSONLD(); }); } - _closeSelect2() { - const $select = this.$('#' + this.selectId); - console.assert($select.length, "select2 missing"); - if (this.select2IsInitialized($select)) { - $select.select2('close'); + disconnectedCallback() { + document.removeEventListener('click', this._onDocumentClicked); + super.disconnectedCallback(); + } + + _onDocumentClicked(ev) { + // Close the popup when clicking outside of select2 + if (!ev.composedPath().includes(this)) { + const $select = this.$('#' + this.selectId); + if ($select.length && this.select2IsInitialized($select)) { + $select.select2('close'); + } } }