fix(clipboard): leak if directive is destroyed while a copy is pending (#18066)

If the `cdkCopyToClipboard` directive is destroyed while there are pending copies, we'll create a leak since the `PendingCopy` will never be destroyed. These changes add some extra logic to ensure that the copies are destroyed and the timeouts are cleared.

Author: crisbeto

src/cdk/clipboard/copy-to-clipboard.spec.ts

@@ -59,7 +59,7 @@ describe('CdkCopyToClipboard', () => {
   it('emits copied event false when copy fails', fakeAsync(() => {
     spyOn(clipboard, 'copy').and.returnValue(false);
     fixture.nativeElement.querySelector('button')!.click();
-    tick();
+    tick(1);
 
     expect(fixture.componentInstance.copied).toHaveBeenCalledWith(false);
   }));
@@ -76,7 +76,7 @@ describe('CdkCopyToClipboard', () => {
 
     fixture.nativeElement.querySelector('button')!.click();
     fixture.detectChanges();
-    tick();
+    tick(3);
 
     expect(attempts).toBe(maxAttempts);
     expect(fixture.componentInstance.copied).toHaveBeenCalledTimes(1);
@@ -98,10 +98,37 @@ describe('CdkCopyToClipboard', () => {
 
     fixture.nativeElement.querySelector('button')!.click();
     fixture.detectChanges();
-    tick();
+    tick(3);
 
     expect(attempts).toBe(maxAttempts);
     expect(fixture.componentInstance.copied).toHaveBeenCalledTimes(1);
     expect(fixture.componentInstance.copied).toHaveBeenCalledWith(false);
   }));
+
+  it('should destroy any pending copies when the directive is destroyed', fakeAsync(() => {
+    const fakeCopy = {
+      copy: jasmine.createSpy('copy spy').and.returnValue(false) as () => boolean,
+      destroy: jasmine.createSpy('destroy spy') as () => void
+    } as PendingCopy;
+
+    fixture.componentInstance.attempts = 10;
+    fixture.detectChanges();
+
+    spyOn(clipboard, 'beginCopy').and.returnValue(fakeCopy);
+    fixture.detectChanges();
+
+    fixture.nativeElement.querySelector('button')!.click();
+    fixture.detectChanges();
+    tick(1);
+
+    expect(fakeCopy.copy).toHaveBeenCalledTimes(2);
+    expect(fakeCopy.destroy).toHaveBeenCalledTimes(0);
+
+    fixture.destroy();
+    tick(1);
+
+    expect(fakeCopy.copy).toHaveBeenCalledTimes(2);
+    expect(fakeCopy.destroy).toHaveBeenCalledTimes(1);
+  }));
+
 });

src/cdk/clipboard/copy-to-clipboard.ts

@@ -15,8 +15,10 @@ import {
   InjectionToken,
   Inject,
   Optional,
+  OnDestroy,
 } from '@angular/core';
 import {Clipboard} from './clipboard';
+import {PendingCopy} from './pending-copy';
 
 /** Object that can be used to configure the default options for `CdkCopyToClipboard`. */
 export interface CdkCopyToClipboardConfig {
@@ -38,7 +40,7 @@ export const CKD_COPY_TO_CLIPBOARD_CONFIG =
     '(click)': 'copy()',
   }
 })
-export class CdkCopyToClipboard {
+export class CdkCopyToClipboard implements OnDestroy {
   /** Content to be copied. */
   @Input('cdkCopyToClipboard') text: string = '';
 
@@ -62,6 +64,15 @@ export class CdkCopyToClipboard {
    */
   @Output('copied') _deprecatedCopied = this.copied;
 
+  /** Copies that are currently being attempted. */
+  private _pending = new Set<PendingCopy>();
+
+  /** Whether the directive has been destroyed. */
+  private _destroyed: boolean;
+
+  /** Timeout for the current copy attempt. */
+  private _currentTimeout: any;
+
   constructor(
     private _clipboard: Clipboard,
     /**
@@ -81,16 +92,21 @@ export class CdkCopyToClipboard {
     if (attempts > 1) {
       let remainingAttempts = attempts;
       const pending = this._clipboard.beginCopy(this.text);
+      this._pending.add(pending);
+
       const attempt = () => {
         const successful = pending.copy();
-        if (!successful && --remainingAttempts) {
+        if (!successful && --remainingAttempts && !this._destroyed) {
           // @breaking-change 10.0.0 Remove null check for `_ngZone`.
           if (this._ngZone) {
-            this._ngZone.runOutsideAngular(() => setTimeout(attempt));
+            this._currentTimeout = this._ngZone.runOutsideAngular(() => setTimeout(attempt, 1));
           } else {
-            setTimeout(attempt);
+            // We use 1 for the timeout since it's more predictable when flushing in unit tests.
+            this._currentTimeout = setTimeout(attempt, 1);
           }
         } else {
+          this._currentTimeout = null;
+          this._pending.delete(pending);
           pending.destroy();
           this.copied.emit(successful);
         }
@@ -100,4 +116,14 @@ export class CdkCopyToClipboard {
       this.copied.emit(this._clipboard.copy(this.text));
     }
   }
+
+  ngOnDestroy() {
+    if (this._currentTimeout) {
+      clearTimeout(this._currentTimeout);
+    }
+
+    this._pending.forEach(copy => copy.destroy());
+    this._pending.clear();
+    this._destroyed = true;
+  }
 }

tools/public_api_guard/cdk/clipboard.d.ts

@@ -1,11 +1,12 @@
-export declare class CdkCopyToClipboard {
+export declare class CdkCopyToClipboard implements OnDestroy {
     _deprecatedCopied: EventEmitter<boolean>;
     attempts: number;
     copied: EventEmitter<boolean>;
     text: string;
     constructor(_clipboard: Clipboard,
     _ngZone?: NgZone | undefined, config?: CdkCopyToClipboardConfig);
     copy(attempts?: number): void;
+    ngOnDestroy(): void;
     static ɵdir: i0.ɵɵDirectiveDefWithMeta<CdkCopyToClipboard, "[cdkCopyToClipboard]", never, { "text": "cdkCopyToClipboard"; "attempts": "cdkCopyToClipboardAttempts"; }, { "copied": "cdkCopyToClipboardCopied"; "_deprecatedCopied": "copied"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<CdkCopyToClipboard>;
 }