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

@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>

@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>