2

I have the following MudBlazor button that copies text from a row inside a table:

<MudIconButton OnClick="@(() => WriteTextAsync(@context.TokenName))"></MudIconButton>

@code {
    public ValueTask WriteTextAsync(string text) {
        return JsRuntime.InvokeVoidAsync("copyToClipboard", text);
    }
}

This is the JavaScript function inside _Host.cshtml that the button invokes:

<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).catch((err) => {
            alert(err.message);
        });
    }
</script>

This code does work as expected on PC and Android but on iOS the following exception is thrown:

The request is not allowed by the user agent or the platform in the current context possibly because the user denied permission.

In this thread it was stated that the reason for the exception is that navigator.clipboard must be called by user interactions and not by API calls. So it seems that the interaction with the button in Blazor does not count as a user interaction.

At the moment, unfortunately, I have no approach to be able to solve this problem and I am grateful for any help.

EDIT:

I have created a temporary fix by replacing the MudBlazor-button with the following HTML-button:

<button onclick="copyToClipboard(this.id)" id="@context.TokenName">
<svg> /*contains the graphics of the mudblazor button*/ </svg>
</button>
moccajoghurt
  • 159
  • 9
  • don't have time for a proper answer, but i think that you could add an event listener to the DOM element as it is mounted, and this will be triggered on click, and copy a value that is updated by blazor and shared with your js code. I dont know if it is clear, but it could work. eventually I would isolate this in a dedicated component. – Emidio Torre Nov 18 '21 at 01:41
  • @EmidioTorre this was my first approach but led to inconsistent behaviour because of race conditions. Check out my edit, this temporarily fixes the problem. – moccajoghurt Nov 18 '21 at 09:18

0 Answers0