Remove document event listener once the dropdown is disconnected

src/shared/components/dropdown.js

@@ -9,13 +9,28 @@ const u = converse.env.utils;
 
 export class BaseDropdown extends CustomElement {
 
+    connectedCallback() {
+        super.connectedCallback();
+        this.registerEvents();
+    }
+
+    registerEvents() {
+        this.clickOutside = this._clickOutside.bind(this);
+        document.addEventListener('click', this.clickOutside);
+    }
+
     firstUpdated () {
         this.menu = this.querySelector('.dropdown-menu');
         this.dropdown = this.firstElementChild;
         this.button = this.dropdown.querySelector('button');
         this.dropdown.addEventListener('click', ev => this.toggleMenu(ev));
         this.dropdown.addEventListener('keyup', ev => this.handleKeyUp(ev));
-        document.addEventListener('click', ev => !this.contains(ev.composedPath()[0]) && this.hideMenu(ev));
+    }
+
+    _clickOutside(ev) {
+        if (!this.contains(ev.composedPath()[0])) {
+            this.hideMenu(ev);
+        }
     }
 
     hideMenu () {
@@ -45,6 +60,11 @@ export class BaseDropdown extends CustomElement {
             this.enableArrowNavigation(ev);
         }
     }
+
+    disconnectedCallback () {
+        document.removeEventListener('click', this.clickOutside);
+        super.disconnectedCallback();
+    }
 }
 
 
@@ -76,7 +96,6 @@ export default class DropdownList extends BaseDropdown {
         this.navigator.disable();
     }
 
-
     firstUpdated () {
         super.firstUpdated();
         this.initArrowNavigation();