Request for an issue: Clipboard API via JSInterop Fails in Safari (macOS)

[Nandhinilenin]

Describe the bug

We are encountering an issue with clipboard interaction in a Blazor application using JavaScript interop. Specifically, when invoking navigator.clipboard.writeText via JS interop, the clipboard operation fails only in Safari on macOS.

The error message observed is:

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

This issue does not occur in other browsers such as Chrome or Edge, where the clipboard operation works as expected.

To replicate the issue, we created a minimal sample where a button click triggers a JS interop call to copy text to the clipboard.

Sample to replicate issue
JavaScript:

window.copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
        console.log("Text copied to clipboard:", text);
    }).catch(err => {
        console.error("Clipboard copy failed:", err);
    });
};

Blazor Razor Page:

@rendermode InteractiveServer
@inject IJSRuntime JS

<h3>Clipboard Copy Example</h3>
<button @onclick="HandleClick">Copy Text</button>

@code {
    private async Task HandleClick()
    {
        await JS.InvokeVoidAsync("copyToClipboard", "TextToCopy");
    }
}

Expected Behavior

Clicking the button should copy the text "TextToCopy" to the clipboard without any errors across all modern browsers.

Steps To Reproduce

1. Run the sample application in Safari browser on macOS.
2. Open the browser console (Developer Tools).
3. Click the "Copy Text" button.
4. Observe the console for error.

Exceptions (if any)

No response

.NET Version

9.0.101

Anything else?

Environment Details

Device: MacBook Air 13-inch, M3, 2024
Chip Type: Apple M3
Browser: Safari
OS: macOS
Blazor Version: Server-side with @rendermode InteractiveServer

[MihuBot]

I'm a bot. Here is a possible related and/or duplicate issue (I may be wrong):

• navigator.clipboard.writeText blocked in Safari (MacOS and iOS) #38211

[javiercn]

@Nandhinilenin thanks for contacting us.

This seems to be a dupe of #38211

You likely can only perform the API call in response to a user event (button click or similar). Safari might require the action to be performed synchronously, which might require you to write a JS handler to do so, store the contents somewhere and retrieve them via JS interop right afterwards.