Fix global event listeners management

Author: NoelDeMartin

src/design-system/components/dialogs-root/DialogsRoot.ts

@@ -16,14 +16,14 @@ export default class DialogsRoot extends WebComponent {
   connectedCallback (): void {
     super.connectedCallback()
 
-    window.addEventListener(ShowDialogEvent.eventName, (event) => {
+    this.addGlobalEventListener(ShowDialogEvent.eventName, (event) => {
       event.stopImmediatePropagation()
 
       this.dialogs = [...this.dialogs, event.dialog]
     })
 
-    window.addEventListener(CloseDialogEvent.eventName, (event) => {
-      event.stopPropagation()
+    this.addGlobalEventListener(CloseDialogEvent.eventName, (event) => {
+      event.stopImmediatePropagation()
 
       this.dialogs = this.dialogs.filter(dialog => dialog.id !== event.id)
     })

src/primitives/lib/WebComponent.ts

@@ -4,6 +4,17 @@ export default abstract class WebComponent extends LitElement {
   static states?: Record<string, Function>
 
   protected internals?: ElementInternals
+  protected globalListeners: [type: string, listener: EventListener][] = []
+
+  disconnectedCallback (): void {
+    super.disconnectedCallback()
+
+    for (const [type, listener] of this.globalListeners) {
+      window.removeEventListener(type, listener)
+    }
+
+    this.globalListeners = []
+  }
 
   protected willUpdate (changedProperties: Map<string, any>) {
     super.willUpdate(changedProperties)
@@ -27,6 +38,12 @@ export default abstract class WebComponent extends LitElement {
     }
   }
 
+  protected addGlobalEventListener <T extends keyof WindowEventMap>(type: T, listener: (this: Window, ev: WindowEventMap[T]) => any) {
+    this.globalListeners.push([type, listener as EventListener])
+
+    window.addEventListener(type, listener)
+  }
+
   protected render () {
     return html`<slot></slot>`
   }