@page "/"

<PageTitle>Telerik Blazor App | Home</PageTitle>

<div id="home-page">
    <HomeSvg />

    <h1>Hello, Telerik UI for Blazor!</h1>

    <p>Welcome to your new Telerik Blazor app.</p>

    <TelerikButton OnClick="OpenWindow1">Click Here First</TelerikButton>
    <TelerikButton OnClick="OpenWindow2">Click Here Second</TelerikButton>
    <TelerikButton OnClick="@(async () => {await Task.Delay(100);})">Unrelated OnClick</TelerikButton>


</div>

<TelerikWindow Visible="ShowWindow1">
    <WindowActions>
        <WindowAction OnClick="CloseWindow1" Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <span>Moving window now will help find this window in next step, but not necessary to replicate bug.</span>
        <br />
        <span>Close window using 'X'.</span>
    </WindowContent>
</TelerikWindow>

<TelerikWindow Visible="ShowWindow2">
    <WindowActions>
        <WindowAction OnClick="CloseWindow2" Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <span>Window 1 shouldn't be appearing now, but it it is. Window 1 may be behind this window if you didn't drag in previous step.</span>
        <br />
        <span>If you close these windows, and click the 'Unrelated OnClick' button, both of these windows will reappear, despite just firing Task.Delay(100)</span>
    </WindowContent>
</TelerikWindow>

<style>
    #home-page {
        margin-left: auto;
        margin-right: auto;
        max-width: max-content;
        text-align: center;
        font-size: var(--kendo-font-size-xl);
    }

    @@media (min-height: calc(56px + 50px + 400px)) {
        /* header + footer + home page container*/
        #home-page {
            margin-top: calc(50vh - 28px - 25px - 200px);
        }
    }
</style>

@code {
    public bool ShowWindow1 { get; set; }
    public bool ShowWindow2 { get; set; }

    public async Task OpenWindow1()
    {
        ShowWindow1 = true;
    }

    public async Task OpenWindow2()
    {
        ShowWindow2 = true;
    }

    public void CloseWindow1()
    {
        ShowWindow2 = false;
        StateHasChanged();
    }

    public void CloseWindow2()
    {
        ShowWindow2 = false;
    }
}

<p> The DateInput Value is: @DateValue </p>

@if (ShouldRenderDateInput)
{
    <TelerikDateInput @bind-Value="@DateValue"
                    Format="dd/MM/yyyy"
                    AutoCorrectParts="false"
                    Width="200px" />
}
@* the else block is optional to prevent delayed component appearance *@
else
{
    <TelerikDateInput @bind-Value="@DateValue"
                    Format="dd/MM/yyyy"
                    AutoCorrectParts="false"
                    Width="200px" />
}

@code {
    private DateTime? DateValue { get; set; }
    private bool ShouldRenderDateInput { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(200);
        DateValue = new DateTime(2026, 06, 22);
        ShouldRenderDateInput = true;
    }
}

@implements IDisposable
@inject NavigationManager NavManager

<TelerikTabStrip ActiveTabId="@ActiveTabId"
                 ActiveTabIdChanged="@TabStripActiveTabIdChanged">
    @for (int i = 1; i <= TabCount; i++)
    {
        int tabIndex = i;

        <TabStripTab @key="@tabIndex" Title="@($"Tab {tabIndex}")" Id="@($"tab{tabIndex}")">
            <h2>Tab @tabIndex</h2>
        </TabStripTab>
    }
</TelerikTabStrip>

@code {
    private string ActiveTabId { get; set; } = "tab1";

    private bool IsNavigating { get; set; }

    private const int TabCount = 3;
    

    private async Task TabStripActiveTabIdChanged(string newActiveTabId)
    {
        if (IsNavigating)
        {
            return;
        }

        ActiveTabId = newActiveTabId;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            locationChangingRegistration = NavManager.RegisterLocationChangingHandler(OnLocationChanging);
        }
    }

    private IDisposable? locationChangingRegistration;

    private ValueTask OnLocationChanging(LocationChangingContext context)
    {
        IsNavigating = true;

        return ValueTask.CompletedTask;
    }

    public void Dispose() => locationChangingRegistration?.Dispose();
}

Bug due to week day format string inconsistency between .NET and JavaScript (dddd vs EEEE):

<TelerikDateTimePicker @bind-Value="@SelectedTime"
                       ShowClearButton="true"
                       Width="360px">
    <DateTimePickerFormatPlaceholder Weekday="week" />
</TelerikDateTimePicker>

<br />
<br />

Bug due to usage of a standard date format string:

<TelerikDatePicker @bind-Value="@SelectedTime"
                   ShowClearButton="true"
                   Format="d"
                   Width="360px">
    <DateTimePickerFormatPlaceholder Day="dd" Month="mm" Year="yyyy" />
</TelerikDatePicker>

@code {
    private DateTime? SelectedTime = DateTime.Now;
}