From 6ea37a81c444722631b1f6eb8bb51449f0bd83a9 Mon Sep 17 00:00:00 2001
From: arturovt <arthurandrosovich@gmail.com>
Date: Fri, 18 Mar 2022 03:10:38 +0200
Subject: [PATCH] fix(popover): cleanup subscriptions within the
 `DropdownFocusHandler`

---
 .../providers/dropdown-focus-handler.service.ts      | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/projects/angular/src/popover/dropdown/providers/dropdown-focus-handler.service.ts b/projects/angular/src/popover/dropdown/providers/dropdown-focus-handler.service.ts
index 6a193f9c18..72515dc08b 100644
--- a/projects/angular/src/popover/dropdown/providers/dropdown-focus-handler.service.ts
+++ b/projects/angular/src/popover/dropdown/providers/dropdown-focus-handler.service.ts
@@ -5,7 +5,7 @@
  */
 
 import { isPlatformBrowser } from '@angular/common';
-import { Inject, Injectable, Optional, PLATFORM_ID, Renderer2, SkipSelf } from '@angular/core';
+import { Inject, Injectable, OnDestroy, Optional, PLATFORM_ID, Renderer2, SkipSelf } from '@angular/core';
 import { Observable, of, ReplaySubject } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { ClrPopoverToggleService } from '../../../utils/popover/providers/popover-toggle.service';
@@ -18,7 +18,7 @@ import { Linkers } from '../../../utils/focus/focusable-item/linkers';
 import { wrapObservable } from '../../../utils/focus/wrap-observable';
 
 @Injectable()
-export class DropdownFocusHandler implements FocusableItem {
+export class DropdownFocusHandler implements OnDestroy, FocusableItem {
   constructor(
     @Inject(UNIQUE_ID) public id: string,
     private renderer: Renderer2,
@@ -42,7 +42,7 @@ export class DropdownFocusHandler implements FocusableItem {
    * If the dropdown was opened by clicking on the trigger, we automatically move to the first item
    */
   moveToFirstItemWhenOpen() {
-    this.toggleService.openChange.subscribe(open => {
+    const subscription = this.toggleService.openChange.subscribe(open => {
       if (open && this.toggleService.originalEvent) {
         // Even if we properly waited for ngAfterViewInit, the container still wouldn't be attached to the DOM.
         // So setTimeout is the only way to wait for the container to be ready to move focus to first item.
@@ -56,6 +56,8 @@ export class DropdownFocusHandler implements FocusableItem {
         });
       }
     });
+
+    this._unlistenFuncs.push(() => subscription.unsubscribe());
   }
 
   private focusBackOnTrigger = false;
@@ -64,7 +66,7 @@ export class DropdownFocusHandler implements FocusableItem {
    * Focus on the menu when it opens, and focus back on the root trigger when the whole dropdown becomes closed
    */
   handleRootFocus() {
-    this.toggleService.openChange.subscribe(open => {
+    const subscription = this.toggleService.openChange.subscribe(open => {
       if (!open) {
         // We reset the state of the focus service both on initialization and when closing.
         this.focusService.reset(this);
@@ -75,6 +77,8 @@ export class DropdownFocusHandler implements FocusableItem {
       }
       this.focusBackOnTrigger = open;
     });
+
+    this._unlistenFuncs.push(() => subscription.unsubscribe());
   }
 
   private _trigger: HTMLElement;