Planned
Last Updated: 05 Feb 2025 11:05 by ADMIN
Scheduled for 2025 Q2 (May)
Created by: Nicholas
Comments: 4
Category: RadioGroup
Type: Bug Report
2

The RadioGroup's FocusAsync() method does not work. To reproduce, run this example and press the button: https://docs.telerik.com/blazor-ui/components/radiogroup/overview#radiogroup-reference-and-methods

===

A possible workaround is to use JavaScript to focus the first or the selected <input> element:

@inject IJSRuntime js

<TelerikButton OnClick="@FocusRadioGroup">Focus RadioGroup</TelerikButton>

<TelerikRadioGroup Data="@RadioGroupData"
                   Class="my-radiogroup"
                   @bind-Value="@RadioGroupValue"
                   ValueField="@nameof(ListItem.Id)"
                   TextField="@nameof(ListItem.Text)">
</TelerikRadioGroup>

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">function focusRadio(RadioGroupValue) {
        var mrg = RadioGroupValue == null ?
            document.querySelector(".my-radiogroup .k-radio-list-item input") :
            document.querySelector(`.my-radiogroup .k-radio-list-item input[value='${RadioGroupValue}']`);
        if (mrg) {
            mrg.focus()
        }
    }</script>

@code{
    private int? RadioGroupValue { get; set; }

    List<ListItem> RadioGroupData { get; set; } = new List<ListItem>() {
        new ListItem { Id = 1, Text = "Foo" },
        new ListItem { Id = 2, Text = "Bar" },
        new ListItem { Id = 3, Text = "Baz" }
    };

    private async Task FocusRadioGroup()
    {
        await Task.Delay(1);

        await js.InvokeVoidAsync("focusRadio", RadioGroupValue);
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}