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

<TelerikTabStrip @bind-ActiveTabId="@TabStripActiveTabId">
    <TabStripTab Title="First" Id="t1">
        First tab content.
    </TabStripTab>
    <TabStripTab Title="Second" Id="t2">
        Second tab content.
    </TabStripTab>
    <TabStripTab Title="Third" Id="t3">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    private string? TabStripActiveTabId { get; set; }
}

aria-controls="50dc5df2-b83e-41bd-8c34-98470aba77c6"

data-id="50dc5df2-b83e-41bd-8c34-98470aba77c6"
id="8630d4e4-2f22-4eaf-b96c-7cae113b70ed"

<TelerikDropDownButton Icon="@SvgIcon.Share" OnClick="@(()=>OnItemClick("Primary"))">
    <DropDownButtonContent>Share</DropDownButtonContent>
    <DropDownButtonItems>
        <DropDownButtonItem Icon="@SvgIcon.Facebook" OnClick="@(()=>OnItemClick("Facebook"))">Facebook</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Twitter" OnClick="@(()=>OnItemClick("Twitter"))">Twitter</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Linkedin" OnClick="@(()=>OnItemClick("Linkedin"))">Linkedin</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Reddit" OnClick="@(()=>OnItemClick("Reddit"))">Reddit</DropDownButtonItem>
    </DropDownButtonItems>
</TelerikDropDownButton>

<TelerikButton Class="tooltip-target" Title="Telerik Tooltip">Button</TelerikButton>

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValue"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     AdaptiveMode="@AdaptiveMode.Auto"
                     Width="300px" />
<TelerikTooltip TargetSelector=".tooltip-target"
                ShowOn="@TooltipShowEvent.Hover" />

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();
        for (int i = 1; i <= 5; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i}",
                Category = $"Category {i % 6 + 1}"
            });
        }
        base.OnInitialized();
    }

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

@using System.ComponentModel.DataAnnotations
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid @ref="@GridRef"
             OnRead="@OnGridRead"
             TItem="@Product"
             EditMode="@GridEditMode.Incell"
             OnCreate="@OnGridCreate"
             OnDelete="@OnGridDelete"
             OnUpdate="@OnGridUpdate"
             Height="600px">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Name)) )">
                    <TelerikTextBox @bind-Value="@dataItem.Name" />
                </span>
            </EditorTemplate>
        </GridColumn>
        @* <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:N0}" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" DisplayFormat="{0:d}" /> *@
        <GridColumn Field="@nameof(Product.Discontinued)" Width="120px">
            <EditorTemplate>
                @{ var dataItem = (Product)context; }
                <span @onfocusout="@( async () => await OnGridCellFocusOut(nameof(Product.Discontinued)) )">
                    <TelerikCheckBox @bind-Value="@dataItem.Discontinued" />
                </span>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Width="180px">
            <GridCommandButton Command="Delete">Delete</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<Product>? GridRef { get; set; }

    private ProductService GridProductService { get; set; } = new();

    private async Task OnGridCellFocusOut(string field)
    {
        await Task.Delay(100);

        if (GridRef is null)
        {
            return;
        }

        GridState<Product> gridState = GridRef.GetState();
        Product? editItem = gridState.EditItem as Product;

        if (editItem is null)
        {
            return;
        }

        GridCommandEventArgs args = new GridCommandEventArgs()
        {
             Field = field,
             Item = editItem
        };

        await OnGridUpdate(args);


        gridState.EditField = default;
        gridState.EditItem = default!;
        gridState.OriginalEditItem = default!;

        await GridRef.SetStateAsync(gridState);
    }

    private async Task OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        await GridProductService.Create(createdItem);
    }

    private async Task OnGridDelete(GridCommandEventArgs args)
    {
        var deletedItem = (Product)args.Item;

        await GridProductService.Delete(deletedItem);
    }

    private async Task OnGridRead(GridReadEventArgs args)
    {
        DataSourceResult result = await GridProductService.Read(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    private async Task OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;

        await GridProductService.Update(updatedItem);
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
        public decimal? Price { get; set; }
        public int Quantity { get; set; }
        [Required]
        public DateTime? ReleaseDate { get; set; }
        public bool Discontinued { get; set; }
    }

    #region Data Service

    public class ProductService
    {
        private List<Product> Items { get; set; } = new();

        private int LastId { get; set; }

        public async Task<int> Create(Product product)
        {
            await SimulateAsyncOperation();

            product.Id = ++LastId;

            Items.Insert(0, product);

            return LastId;
        }

        public async Task<bool> Delete(Product product)
        {
            await SimulateAsyncOperation();

            if (Items.Contains(product))
            {
                Items.Remove(product);

                return true;
            }

            return false;
        }

        public async Task<List<Product>> Read()
        {
            await SimulateAsyncOperation();

            return Items;
        }

        public async Task<DataSourceResult> Read(DataSourceRequest request)
        {
            return await Items.ToDataSourceResultAsync(request);
        }

        public async Task<bool> Update(Product product)
        {
            await SimulateAsyncOperation();

            int originalItemIndex = Items.FindIndex(x => x.Id == product.Id);

            if (originalItemIndex != -1)
            {
                Items[originalItemIndex] = product;
                return true;
            }

            return false;
        }

        private async Task SimulateAsyncOperation()
        {
            await Task.Delay(100);
        }

        public ProductService(int itemCount = 5)
        {
            Random rnd = Random.Shared;

            for (int i = 1; i <= itemCount; i++)
            {
                Items.Add(new Product()
                {
                    Id = ++LastId,
                    Name = $"Product {LastId}",
                    Description = $"Multi-line\ndescription {LastId}",
                    Price = LastId % 2 == 0 ? null : rnd.Next(0, 100) * 1.23m,
                    Quantity = LastId % 2 == 0 ? 0 : rnd.Next(0, 3000),
                    ReleaseDate = DateTime.Today.AddDays(-rnd.Next(365, 3650)),
                    Discontinued = LastId % 2 == 0
                });
            }
        }
    }

    #endregion Data Service
}

Selected value: @myDdlData.ToList().Where(x => x.Id == selectedValueId).FirstOrDefault()?.MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff")
<br />

<TelerikDropDownList Data="@myDdlData" 
                     TextField="MyTextField" 
                     ValueField="Id" 
                     @bind-Value="selectedValueId">
</TelerikDropDownList>

@code {
    public class MyDdlModel
    {
        public int Id { get; set; }
        public DateTime MyValueField { get; set; }
        public string MyTextField => MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff"); // Display formatted DateTime
    }

    private int selectedValueId { get; set; } = 1;

    private IEnumerable<MyDdlModel> myDdlData = GenerateRandomDateTimes(20);

    private static IEnumerable<MyDdlModel> GenerateRandomDateTimes(int count)
    {
        Random random = new Random();
        DateTime startDate = DateTime.Now;

        return Enumerable.Range(1, count)
            .Select(x => new MyDdlModel
            {
                Id = x, // Unique integer Id
                MyValueField = startDate.AddDays(x)
                    .AddMinutes(random.Next(0, 60))
                    .AddSeconds(random.Next(0, 60))
                    .AddMilliseconds(random.Next(0, 1000))
            }).ToList();
    }
}

Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<p>ComboBox Value: @ComboBoxValue</p>

<TelerikComboBox ItemHeight="30"
                 OnRead="@OnComboBoxRead"
                 PageSize="20"
                 ScrollMode="@DropDownScrollMode.Virtual"
                 TItem="@ListItem"
                 TValue="@(int?)"
                 @bind-Value="@ComboBoxValue"
                 ValueMapper="@ComboBoxValueMapper"
                 Width="240px" />

@code {
    private List<ListItem>? ComboBoxData { get; set; }

    private int? ComboBoxValue { get; set; } = 3;

    private async Task OnComboBoxRead(ReadEventArgs args)
    {
        DataSourceResult result = await ComboBoxData.ToDataSourceResultAsync(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
    }

    private async Task<ListItem?> ComboBoxValueMapper(int? selectValue)
    {
        // Triggers the bug
        await Task.Yield();

        ListItem? result = ComboBoxData?.FirstOrDefault(x => selectValue == x.Value);

        return result;
    }

    protected override void OnInitialized()
    {
        ComboBoxData = Enumerable
            .Range(1, 1234)
            .Select(x => new ListItem()
                {
                    Value = x,
                    Text = $"Item {x}"
                })
            .ToList();
    }

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