Last Updated: 09 Oct 2020 10:36 by ADMIN
Created on: 09 Oct 2020 10:36
Category: ComboBox
Type: Feature Request
ComboBox to select all text when clicking in it to type

Would be fine if when you click on a filterable combobox the whole text in it will be selected, so you can click and start digit new text filter without delete the old text before.



This should probably be behind a flag to keep the original behavior.

At the moment, you can achieve it with a bit of JS to focus and select all the text:


        function selectAllText(parentElem) {
            let input = parentElem.querySelector(".k-input");
            if (input && input.focus) {


Which you can call with the approach from this article:


@inject IJSRuntime _js

<br />

<span @onfocusin="@SelectAllText" @ref="@spanRef">
    <TelerikComboBox Data="@Data"
                     Filterable="true" FilterOperator="@StringFilterOperator.Contains"
                     Placeholder="Find product by typing part of its name"
                     TextField="ProductName" ValueField="ProductName" AllowCustom="true">

@code {
    ElementReference spanRef { get; set; }
    async Task SelectAllText()
        await _js.InvokeVoidAsync("selectAllText", spanRef);

    public List<Product> Data { get; set; }
    public string SelectedValue { get; set; }

    protected override void OnInitialized()
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
            products.Add(new Product()
                ProductId = i,
                ProductName = $"Product {i}"

        Data = products;

    public class Product
        public int ProductId { get; set; }
        public string ProductName { get; set; }