Unplanned
Last Updated: 31 May 2024 23:00 by Jonathan
Robert
Created on: 10 Jul 2020 15:48
Category: UI for Blazor
Type: Feature Request
25
Dropdowns and date/time pickers - open the dropdown on component focus

I would like to have a boolean flag like ExpandDropdownOnFocus which when set to true and the component is focused the dropdown will be expanded.

ADMIN EDIT: When voting, please add your comment on how you would like this to be implemented. At the moment, there are two ideas:

  • A parameter that, when set to true, will make the dropdowns shop up when the component receives focus - less code, but solves only one specific scenario
  • An OnFocus event plus an instance method that opens the dropdown - a little more code (handle an event, populate a reference, call its method) which will provide more functionality and flexibility as the event will let you know that focus happened and you can add more logic (calculations, change CSS classes,...)
6 comments
Jonathan
Posted on: 31 May 2024 23:00

If you are using AspNetCore, this can be done more simply by wrapping the control and handling onfocusin:

 

    <div @onfocusin="@ExpandCombo">
        <TelerikComboBox @ref="@_myCombo" ... />
    </div>

    ...

    async Task ExpandCombo(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
    {
        _myCombo.Open();
    }

 

 

ADMIN
Dimo
Posted on: 17 Oct 2022 12:17

Hello everyone,

Please refer to this KB article:

Open Input Dropdown on Focus

Use a similar approach with a MultiColumnComboBox, just replace the component CSS class and reference:

await js.InvokeVoidAsync("attachFocusHandler", MultiColumnComboBoxRef.Id, ".k-dropdowngrid");

I have updated the article and changes will go live after the next site upload.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Greg
Posted on: 10 Oct 2022 18:46
Can this work for MultiColumnComboBox as well?  It does not seem to work.  What would be the dropdown element?
Sheraz
Posted on: 14 Jul 2021 08:11

I believe the second option would be better as it will provide more control and functionality to the developers.

The first one only solves one very specific problem.

Eli
Posted on: 24 Aug 2020 20:05
I think the the first implementation suggested would suffice.  When browsing the web you generally expect drop downs/combobox to open when you click on them, not have to press the down icon.  I would think this would be the default as well since it is the behavior of the HTML Select and built in InputSelect
ADMIN
Marin Bratanov
Posted on: 10 Jul 2020 19:15

At the moment, you could use a workaround similar to the following code:

 

@inject IJSRuntime _js
@* The approach from https://docs.telerik.com/blazor-ui/knowledge-base/inputs-handle-keyboard-events to capture focus *@

<span @onfocusin="@ExpandCombo">
    <TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
                     Placeholder="Select an item..." ClearButton="true" Filterable="true" Id="myCombo">
    </TelerikComboBox>
</span>

@code {
    async Task ExpandCombo()
    {
        await _js.InvokeVoidAsync("expandCombo", "myCombo");
    }

    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3; //usually the current value should come from the model data
}

 

 

    <script>
        // for the combo box we start from the input ID, and we walk the DOM to find the dropdown element to click it
        // for other components this may differ (the element you need to simulate a click on my be different)
        // and for some components it may be impossible at the moment due to their internal logic - like the AutoComplete that requires user input
        // you can also refactor this - e.g., pass an element reference from the wrapping element to traverse the DOM from it instead of an ID
        function expandCombo(elemId) {
            var elem = document.querySelector("#" + elemId);
            if (elem) {
                while (elem.parentNode != null && !elem.classList.contains("k-widget")) {
                    elem = elem.parentNode;
                }
                var dropdownArrow = elem.querySelector(".k-select");
                if (dropdownArrow && dropdownArrow.click) {
                    dropdownArrow.click();
                }
            }
        }
    </script>

 

Or something like this for a date picker

@inject IJSRuntime _js
@* The approach from https://docs.telerik.com/blazor-ui/knowledge-base/inputs-handle-keyboard-events to capture focus *@

<span @onfocusin="@ExpandPicker" @ref="@pickerWrapperRef">
    <TelerikDatePicker @bind-Value="@DatePickerValue"></TelerikDatePicker>
</span>

@code {
    ElementReference pickerWrapperRef { get; set; }
    async Task ExpandPicker()
    {
        await _js.InvokeVoidAsync("expandPicker", pickerWrapperRef);
    }

    DateTime DatePickerValue { get; set; } = DateTime.Now.AddDays(-5);
}

    <script>
        function expandPicker(wrapperElem) {
            var popupBtn = wrapperElem.querySelector(".k-select");
            if (popupBtn && popupBtn.click) {
                setTimeout(function () { 
                    popupBtn.click();
                }, 50);
            }
        }
    </script>

Regards,
Marin Bratanov
Progress Telerik