fix(copy-to-clipboard): Fixes an issue that the copy to clipboard was…

… called on initial render.
dynatrace-oss · Jan 12, 2022 · 48eb87d · 48eb87d
1 parent b46f305
commit 48eb87d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.html b/libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.html
@@ -7,7 +7,7 @@
   class="dt-copy-to-clipboard-btn-button"
   [variant]="variant"
   #copyButton
-  [cdkCopyToClipboard]="copyToClipboard()"
+  [cdkCopyToClipboard]="_inputValue"
   (cdkCopyToClipboardCopied)="_copiedToClipboard()"
 >
   <dt-icon *ngIf="showIcon" name="checkmark"></dt-icon>

diff --git a/libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.spec.ts b/libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.spec.ts
@@ -30,6 +30,8 @@ import { DtInputModule } from '@dynatrace/barista-components/input';
 import { createComponent } from '@dynatrace/testing/browser';
 
 describe('DtCopyToClipboard', () => {
+  const execCommandMock = jest.fn().mockReturnValue(true);
+
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
@@ -44,10 +46,15 @@ describe('DtCopyToClipboard', () => {
       });
       TestBed.compileComponents();
       // tslint:disable-next-line:no-any
-      document.execCommand = (): boolean => true;
+      document.execCommand = execCommandMock;
     }),
   );
 
+  it('should not trigger a copy action on render', (): void => {
+    createComponent(CallbackBehaviorTestApp);
+    expect(execCommandMock).not.toHaveBeenCalled();
+  });
+
   it('should trigger callback - at least 1 copy must be called', (): void => {
     const fixture = createComponent(CallbackBehaviorTestApp);
     const buttonDebugElement = fixture.debugElement.query(

diff --git a/libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.ts b/libs/barista-components/copy-to-clipboard/src/copy-to-clipboard.ts
@@ -91,9 +91,14 @@ export class DtCopyToClipboard implements AfterContentInit, OnDestroy {
 
   private _timer: Subscription;
 
+  /** @internal returns the current value from the projected input */
+  get _inputValue(): string | undefined {
+    return this._input?.nativeElement.value;
+  }
+
   /** Copies the provided content to the clipboard. */
   copyToClipboard(): void {
-    const value = this._input.nativeElement.value;
+    const value = this._inputValue;
     if (this._input && isDefined(value)) {
       this._cdkClipboard.copy(value);
     } else {