fix(popover): allow autoClose to be dynamic (#4680)

src/popover/popover.ts

@@ -214,6 +214,7 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
 	private _unregisterListenersFn;
 	private _positioning = ngbPositioning();
 	private _zoneSubscription: Subscription;
+	private _autoCloseCleanupFn: () => void;
 
 	/**
 	 * Opens the popover.
@@ -271,14 +272,28 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
 				});
 			});
 
-			ngbAutoClose(this._ngZone, this._document, this.autoClose, () => this.close(), this.hidden, [
-				this._windowRef.location.nativeElement,
-			]);
+			this.setupAutoClose();
 
 			transition$.subscribe(() => this.shown.emit());
 		}
 	}
 
+	setupAutoClose() {
+		//Clean up previous autoClose
+		if (this._autoCloseCleanupFn != undefined) {
+			this._autoCloseCleanupFn();
+		}
+		//Setup new autoClose
+		this._autoCloseCleanupFn = ngbAutoClose(
+			this._ngZone,
+			this._document,
+			this.autoClose,
+			() => this.close(),
+			this.hidden,
+			[this._windowRef!.location.nativeElement],
+		);
+	}
+
 	/**
 	 * Closes the popover.
 	 *
@@ -329,14 +344,18 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
 		);
 	}
 
-	ngOnChanges({ ngbPopover, popoverTitle, disablePopover, popoverClass }: SimpleChanges) {
+	ngOnChanges({ ngbPopover, popoverTitle, disablePopover, popoverClass, autoClose }: SimpleChanges) {
 		if (popoverClass && this.isOpen()) {
 			this._windowRef!.setInput('popoverClass', popoverClass.currentValue);
 		}
 		// close popover if title and content become empty, or disablePopover set to true
 		if ((ngbPopover || popoverTitle || disablePopover) && this._isDisabled()) {
 			this.close();
 		}
+		//Dynamically update autoClose
+		if (autoClose && !this._isDisabled() && this.isOpen()) {
+			this.setupAutoClose();
+		}
 	}
 
 	ngOnDestroy() {

src/util/autoclose.ts

@@ -1,5 +1,5 @@
 import { NgZone } from '@angular/core';
-import { fromEvent, Observable, race } from 'rxjs';
+import { fromEvent, Observable, race, Subscription } from 'rxjs';
 import { delay, filter, map, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 import { closest } from './util';
 
@@ -39,6 +39,7 @@ export function ngbAutoClose(
 	ignoreElements?: HTMLElement[],
 	insideSelector?: string,
 ) {
+	let subscriptions: Subscription[] = [];
 	// closing on ESC and outside clicks
 	if (type) {
 		zone.runOutsideAngular(
@@ -77,10 +78,17 @@ export function ngbAutoClose(
 					takeUntil(closed$),
 				) as Observable<MouseEvent>;
 
-				race([escapes$.pipe(map((_) => SOURCE.ESCAPE)), closeableClicks$.pipe(map((_) => SOURCE.CLICK))]).subscribe(
-					(source: SOURCE) => zone.run(() => close(source)),
-				);
+				const raceSubscription = race([
+					escapes$.pipe(map((_) => SOURCE.ESCAPE)),
+					closeableClicks$.pipe(map((_) => SOURCE.CLICK)),
+				]).subscribe((source: SOURCE) => zone.run(() => close(source)));
+
+				// Add the race subscription to the array of subscriptions
+				subscriptions.push(raceSubscription);
 			}),
 		);
 	}
+
+	// Cleanup logic
+	return () => subscriptions.forEach((sub) => sub.unsubscribe());
 }