How to Copy Text from an ItemTemplate

Environment

Product

AutoComplete for Blazor

DropDownList for Blazor

ComboBox for Blazor

MultiSelect for Blazor

Description

I want to allow users to copy the text from the dropdown list in the AutoComplete component.

Solution

To enable text copying from the dropdown list in the AutoComplete, use the ItemTemplate to display the desired text alongside a button that uses JavaScript and the Clipboard API for copying. Here’s an example implementation:

@inject IJSRuntime JS

<style>
    .autocomplete-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
</style>

<TelerikAutoComplete Data="@AutoCompleteData" @bind-Value="@Role" Placeholder="Write your position">
    <ItemTemplate>
        @{
            var text = context.ToString();
        }
        <div class="autocomplete-item">
            <strong>@text</strong>
            <TelerikButton OnClick="@(() => CopyToClipboard(text))"
                           Icon="@SvgIcon.Copy"
                           FillMode="@ThemeConstants.Button.FillMode.Outline" />
        </div>
    </ItemTemplate>
</TelerikAutoComplete>

@code {
    private string Role { get; set; }
    private List<string> AutoCompleteData { get; set; }
    private List<string> SourceData { get; set; } = new()
    {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
    };

    protected override void OnInitialized()
    {
        AutoCompleteData = SourceData;
    }

    private void OnCheckBoxChangeHandler()
    {
        AutoCompleteData = new List<string>(SourceData);
    }

    private async Task CopyToClipboard(string text)
    {
        try
        {
            var isSupported = await JS.InvokeAsync<bool>("eval", "!!(navigator.clipboard && navigator.clipboard.writeText)");
            if (isSupported)
            {
                await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
            }
            else
            {
                Console.WriteLine("Clipboard API not supported in this browser.");
                // Optionally show a notification to the user
            }
        }
        catch (Exception ex)
        {
            Console.Error.WriteLine($"Clipboard copy failed: {ex.Message}");
            // Optionally show a fallback UI message to the user
        }
    }
}

See Also

• AutoComplete Documentation
• Clipboard API Documentation
• Blazor JavaScript Interoperability