diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html index 15a8e371e..14ac7154a 100644 --- a/libs/ui/src/lib/value/value.component.html +++ b/libs/ui/src/lib/value/value.component.html @@ -15,9 +15,9 @@ class="ml-1 no-height no-min-width p-1" mat-button type="button" - [attr.aria-label]="copyToClipboardTitle" [title]="isCopied ? copiedTitle : copyToClipboardTitle" (click)="onCopyValueToClipboard()" + (mousedown)="$event.preventDefault()" > (); - private copyConfirmationTimeout?: ReturnType; + private copyToClipboardTimeout: ReturnType; private readonly formatOptions = computed(() => { const digits = this.hasPrecision ? this.precision() : 2; @@ -184,46 +184,35 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy { } public ngOnDestroy() { - this.clearCopyConfirmation(); + if (this.copyToClipboardTimeout) { + clearTimeout(this.copyToClipboardTimeout); + } } public onCopyValueToClipboard() { - this.clearCopyConfirmation(); - - const hasCopied = this.clipboard.copy(String(this.value)); + this.clipboard.copy(String(this.value)); - if (!hasCopied) { - this.snackBar.dismiss(); + this.isCopied = true; - return; + if (this.copyToClipboardTimeout) { + clearTimeout(this.copyToClipboardTimeout); } - this.isCopied = true; - this.copyConfirmationTimeout = setTimeout(() => { - this.copyConfirmationTimeout = undefined; + this.copyToClipboardTimeout = setTimeout(() => { this.isCopied = false; + this.changeDetectorRef.markForCheck(); - }, ms('2 seconds')); + }, ms('3 seconds')); this.snackBar.open( '✅ ' + $localize`${this.value} has been copied to the clipboard`, undefined, { - duration: ms('3 seconds'), - politeness: 'polite' + duration: ms('3 seconds') } ); } - private clearCopyConfirmation() { - if (this.copyConfirmationTimeout) { - clearTimeout(this.copyConfirmationTimeout); - this.copyConfirmationTimeout = undefined; - } - - this.isCopied = false; - } - private initializeVariables() { this.absoluteValue = 0; this.formattedValue = '';