"navigator.clipboard.writeText fails if tab loses focus — workaround?"

I'm using navigator.clipboard.writeText() to copy decrypted content after a button click.

The value is decrypted asynchronously (Promise / Observable in Angular), and once decrypted, I attempt to copy it to clipboard.

Problem

In practice, users click the "Copy" button and immediately switch to another app (like Notepad) or browser tab to paste the value.

This causes the document to lose focus before the asynchronous decryption completes, and the clipboard operation fails.

UX Issue

As a result — the copy silently fails, and the user ends up pasting nothing.

This is especially problematic because they don’t see the error, and it feels like the button is broken.

I understand this is a browser limitation for security reasons.

Are there any workarounds ? What should I do in this situation? Here is my current implementation

public copySecureField(key: keyof SecureInfoFields, value: string): void {
this.getDecryptedDataForCopying({ [key]: value })
.pipe(
switchMap((data) => {
return from(navigator.clipboard.writeText(data[key])).pipe(
catchError(() => {
this._notificationService.error(COPY_FAIL_FOCUS_MESSAGE);

return EMPTY;
}),
);
}),
tap(() => this.setSecureFieldIsCopied(key, true)),
delay(1000),
finalize(() => this.setSecureFieldIsCopied(key, false)),
)
.subscribe();
}

Continue reading...