diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html
index 55f3008cf7..6b38870d3e 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.html
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html
@@ -20,8 +20,8 @@
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
         [matTooltipPosition]="matTooltipPosition"
-        (mouseenter)="copied ? $event.stopImmediatePropagation():''"
-        (mouseleave)="copied ? $event.stopImmediatePropagation():''"
+        (mouseenter)="immediatePropagation($event)"
+        (mouseleave)="immediatePropagation($event)"
         (click)="copy($event)">
   <mat-icon [svgIcon]="mdiIconSymbol" [ngStyle]="style" [ngClass]="{'copied': copied}">
     {{ iconSymbol }}
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
index 3cf3757c03..0e5f5de8d9 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.scss
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss
@@ -19,7 +19,7 @@
     width: 32px;
     line-height: 32px;
     .mat-icon.copied{
-      color: #00C851!important;
+      color: #00C851 !important;
     }
   }
   &:hover{
diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.ts b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
index e8e4d8e4b8..9e73ad9734 100644
--- a/ui-ngx/src/app/shared/components/button/copy-button.component.ts
+++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts
@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ClipboardService } from 'ngx-clipboard';
-import { MatTooltip, TooltipPosition } from '@angular/material/tooltip/tooltip';
+import { MatTooltip, TooltipPosition } from '@angular/material/tooltip';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -52,6 +52,9 @@ export class CopyButtonComponent {
   @Input()
   style: {[key: string]: any} = {};
 
+  @Output()
+  successCopied: EventEmitter<string>;
+
   constructor(private clipboardService: ClipboardService,
               private translate: TranslateService,
               private cd: ChangeDetectorRef) {
@@ -61,11 +64,11 @@ export class CopyButtonComponent {
 
   copy($event: Event): void {
     $event.stopPropagation();
-    $event.preventDefault();
     if (this.timer) {
       clearTimeout(this.timer);
     }
     this.clipboardService.copy(this.copyText);
+    this.successCopied.emit(this.copyText);
     this.copedIcon = 'done';
     this.copied = true;
     this.tooltip.show();
@@ -92,4 +95,8 @@ export class CopyButtonComponent {
   get matTooltipPosition(): TooltipPosition {
     return this.copied ? 'below' : this.tooltipPosition;
   }
+
+  immediatePropagation($event: Event): void {
+    this.copied ? $event.stopImmediatePropagation(): '';
+  }
 }