From dcacfbd7929942cf51331eff209abea6983ad93d Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Thu, 12 Jun 2025 12:59:18 +0000
Subject: [PATCH 1/2] Added new kb article autocomplete-copy-text-itemtemplate

---
 .../autocomplete-copy-text-itemtemplate.md    | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 knowledge-base/autocomplete-copy-text-itemtemplate.md

diff --git a/knowledge-base/autocomplete-copy-text-itemtemplate.md b/knowledge-base/autocomplete-copy-text-itemtemplate.md
new file mode 100644
index 0000000000..ccb7cf1f78
--- /dev/null
+++ b/knowledge-base/autocomplete-copy-text-itemtemplate.md
@@ -0,0 +1,81 @@
+---
+title: How to Copy Text from an ItemTemplate
+description: Learn how to allow users to copy text from the ItemTemplate in the AutoComplete for Blazor component.
+type: how-to
+page_title: How to Enable Text Copy in AutoComplete Dropdown Blazor
+slug: autocomplete-kb-copy-text-itemtemplate
+tags: autocomplete, blazor, itemtemplate, clipboard, text, copy, paste
+res_type: kb
+ticketid: 1689288
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>AutoComplete for Blazor</td>
+            <td>DropDownList for Blazor</td>
+            <td>ComboBox for Blazor</td>
+            <td>MultiSelect for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+I want to allow users to copy the text from the dropdown list in the [AutoComplete component](slug:autocomplete-overview).
+
+## 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:
+
+````RAZOR
+@inject IJSRuntime JS
+
+<style>
+    .copy-button {
+        margin-left: 8px;
+    }
+</style>
+
+<TelerikAutoComplete Data="@AutoCompleteData" @bind-Value="@Role" Placeholder="Write your position">
+    <ItemTemplate>
+        @{
+            var text = context.ToString();
+        }
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+            <strong>@text</strong>
+            <TelerikButton OnClick="@(() => CopyToClipboard(text))" Class="copy-button" 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 List<string> { "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)
+    {
+        await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
+    }
+}
+````
+
+## See Also
+
+* [AutoComplete Documentation](slug:autocomplete-overview)
+* [Clipboard API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
+* [Blazor JavaScript Interoperability](https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability)

From 791ec200244f7b5751d14bca5e8cd6c8b5961c56 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <Hristian.Stefanov@progress.com>
Date: Tue, 17 Jun 2025 16:23:06 +0300
Subject: [PATCH 2/2] chore(Autocomplete): add suggestions

---
 .../autocomplete-copy-text-itemtemplate.md    | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/knowledge-base/autocomplete-copy-text-itemtemplate.md b/knowledge-base/autocomplete-copy-text-itemtemplate.md
index ccb7cf1f78..d19bd3d57c 100644
--- a/knowledge-base/autocomplete-copy-text-itemtemplate.md
+++ b/knowledge-base/autocomplete-copy-text-itemtemplate.md
@@ -4,7 +4,7 @@ description: Learn how to allow users to copy text from the ItemTemplate in the
 type: how-to
 page_title: How to Enable Text Copy in AutoComplete Dropdown Blazor
 slug: autocomplete-kb-copy-text-itemtemplate
-tags: autocomplete, blazor, itemtemplate, clipboard, text, copy, paste
+tags: blazor, autocomplete, itemtemplate, clipboard, copy, paste
 res_type: kb
 ticketid: 1689288
 ---
@@ -35,8 +35,11 @@ To enable text copying from the dropdown list in the AutoComplete, use the `Item
 @inject IJSRuntime JS
 
 <style>
-    .copy-button {
-        margin-left: 8px;
+    .autocomplete-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
     }
 </style>
 
@@ -45,9 +48,11 @@ To enable text copying from the dropdown list in the AutoComplete, use the `Item
         @{
             var text = context.ToString();
         }
-        <div style="display: flex; align-items: center; justify-content: space-between;">
+        <div class="autocomplete-item">
             <strong>@text</strong>
-            <TelerikButton OnClick="@(() => CopyToClipboard(text))" Class="copy-button" Icon="@SvgIcon.Copy" FillMode="@ThemeConstants.Button.FillMode.Outline" />
+            <TelerikButton OnClick="@(() => CopyToClipboard(text))"
+                           Icon="@SvgIcon.Copy"
+                           FillMode="@ThemeConstants.Button.FillMode.Outline" />
         </div>
     </ItemTemplate>
 </TelerikAutoComplete>
@@ -55,7 +60,10 @@ To enable text copying from the dropdown list in the AutoComplete, use the `Item
 @code {
     private string Role { get; set; }
     private List<string> AutoCompleteData { get; set; }
-    private List<string> SourceData { get; set; } = new List<string> { "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer" };
+    private List<string> SourceData { get; set; } = new()
+    {
+        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
+    };
 
     protected override void OnInitialized()
     {
@@ -69,7 +77,24 @@ To enable text copying from the dropdown list in the AutoComplete, use the `Item
 
     private async Task CopyToClipboard(string text)
     {
-        await JS.InvokeVoidAsync("navigator.clipboard.writeText", 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
+        }
     }
 }
 ````