Fixed circle button

apps/red-ui/src/app/modules/admin/screens/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html

@@ -222,6 +222,7 @@
                             <div class="action-buttons">
                                 <redaction-circle-button
                                     (action)="toggleFieldActive(field)"
+                                    [removeTooltip]="true"
                                     tooltip="file-attributes-csv-import.action.remove"
                                     type="dark-bg"
                                     icon="red:trash"

apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html

@@ -1,6 +1,6 @@
-<div #matTooltip="matTooltip" [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip | translate">
+<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip | translate">
     <button
-        (click)="matTooltip.hide(0); performAction($event)"
+        (click)="performAction($event)"
         [class.dark-bg]="type === 'dark-bg'"
         [class.primary]="type === 'primary'"
         [class.warn]="type === 'warn'"

apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
     selector: 'redaction-circle-button',
@@ -15,18 +16,26 @@ export class CircleButtonComponent implements OnInit {
     @Input() small = false;
     @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default';
     @Input() dummy = false;
+    @Input() removeTooltip = false;
     @Output() action = new EventEmitter<any>();
 
+    @ViewChild(MatTooltip) matTooltip: MatTooltip;
+
     constructor() {}
 
     ngOnInit(): void {}
 
     performAction($event: any) {
         if (!this.disabled) {
-            // Timeout to allow tooltip to disappear first
-            setTimeout(() => {
+            if (this.removeTooltip) {
+                this.matTooltip.hide();
+                // Timeout to allow tooltip to disappear first
+                setTimeout(() => {
+                    this.action.emit($event);
+                }, 0);
+            } else {
                 this.action.emit($event);
-            }, 0);
+            }
         }
     }
 }