@inject IJSRuntime js

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@person" Width="300px">
    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>
    <FormItems>
        <FormItem Field="@nameof(Person.FirstName)" />
        <FormItem>
            <Template>
                <TelerikTabStrip Scrollable="true"
                                 Width="300px"
                                 TabPosition="Telerik.Blazor.TabPosition.Top">
                    @{
                        for (int i = 1; i <= 10; i++)
                        {
                            <TabStripTab Title="@("Tab " + i.ToString())" @key="@i">
                                Tab content.
                            </TabStripTab>
                        }
                    }
                </TelerikTabStrip>
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>

@* suppress-error allows script tags in Razor components. Move this script to an external JS file in production *@
<script suppress-error="BL9992">//
    function changeButtonType() {
        setTimeout(function() {
            var tabstripButtons = document.querySelectorAll(".k-tabstrip-items-wrapper > .k-button");
            tabstripButtons.forEach(el => {
                el.type = "button";
            });
        }, 300);
    }
//</script>

@code {
    public Person person = new Person();

    public class Person
    {
        [Required]
        [MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
        public string FirstName { get; set; }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("changeButtonType");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}