The scenario involves a DropDownList, which receives its data through OnRead at runtime asynchronously. The initial OnRead event that the component fires is not used, so the app calls Rebind() at some point. In this case, the component Value doesn't display until the user opens the dropdown. A possible workaround is to set the Value after the OnRead execution is complete.

https://blazorrepl.telerik.com/mfuUkwFR07p1jyo113

I have a cascading DropDownList scenario with virtual scrolling. When the first DropDownList changes value, the second one should reset its scrollbar to the top, because it now contains new data. This doesn't happen.

Here is a REPL test page.

===

ADMIN EDIT

===

As a workaround for the time being, you may track when the value is changed in the parent DropDownList to dispose and re-initialize the child DropDownList.

Here is an example: https://blazorrepl.telerik.com/mdafHabk585ZtzyV54.

The problematic behavior can be reproduced in the following case:

• The DropDownList is at the lower part of the page, so the popup is rendered on top of the main element.
• The popup height is set to "auto".

In this scenario, when the user filters, the popup position remains unchanged but its height is reduced to fit the filter results. Thus, the popup looks detached from the main element. The behavior is not the same when the popup is rendered below the main element as in this case its top part sticks to the main element.

Reproduction: https://blazorrepl.telerik.com/mpEHGzOt25F1Znxi57.

===

ADMIN EDIT

===

The DropDownList is supposed to open the popup element when Alt-Down is pressed. This doesn't work if the page itself scrolls. Pressing alt-down scrolls the page instead. This is on macOS Safari and Chrome on a MacBook.

https://demos.telerik.com/blazor-ui/dropdownlist/keyboard-navigation

Here is the scenario:

• A select component is near the bottom of the screen and its dropdown shows above the component.
• Height="auto" is set in the PopupSettings
• Filtering is enabled.
• Component version 6.1.0 or later

In this case, reducing or increasing the number of visible dropdown items does not adjust the open dropdown's position. As a result, it may either float too high, or overflow the screen.

Possible workarounds are:

• Use a fixed height in the PopupSettings.
• Downgrade to version 6.0.2.

Here is a test page:

<div style="height:80vh;background:linear-gradient(white,orange)">
    <ol>
        <li>Open a ComboBox</li>
        <li>Type a character to filter and reduce the visible data items</li>
        <li>Observe incorrect popup position that leaves a gap</li>
    </ol>
    <ol>
        <li>Focus a closed ComboBox</li>
        <li>Type a character to filter and display a reduced list of data items</li>
        <li>Remove the filter string to increase the visible data item count</li>
        <li>Observe incorrect popup position that overflows the screen</li>
    </ol>
</div>

WORKS:
<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px" />

BROKEN:
<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px">
    <ComboBoxSettings>
        <ComboBoxPopupSettings Height="auto" MinHeight="50px" MaxHeight="60vh" />
    </ComboBoxSettings>
</TelerikComboBox>

<div style="height:80vh;background:linear-gradient(orange, white)">

</div>

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

    private int SelectedValue { get; set; }

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();

        for (int i = 1; i <= 50; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"
            });
        }

        base.OnInitialized();
    }

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

When you select a date in DropDownList with dates in it (List<DateTime>), the @bind-Value is shaving off the milliseconds.

===ADMIN EDIT===

In the meantime, as a workaround for displaying milliseconds correctly, you can bind the DropDownList to a model. This way, you can use the "Id" to retrieve the selected item and display its precise milliseconds. Below is an example I've prepared to demonstrate this approach:

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();
    }
}

The OnClose event fires multiple times when the handler uses the DialogFactory.

The behavior occurs with all select components (AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect)

Possible workarounds include:

• Use a boolean flag to prevent the OnClose handler from executing the second time, for example, if the second execution occurs less than 1-2 seconds after the first one.
• Use OnChange instead of OnClose.
• Use a <TelerikDialog> component instead of ConfirmAsync.

Here is a test page that reproduces the issue:

<div style="display: flex; gap: 2em;">
    <div>
        <TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
            <ButtonGroupToggleButton @bind-Selected="@UseOnChange">Use OnChange</ButtonGroupToggleButton>
            <ButtonGroupToggleButton @bind-Selected="@UseOnClose">Use OnClose</ButtonGroupToggleButton>
        </TelerikButtonGroup>

        <TelerikDropDownList Data="@Data"
                             @bind-Value="@Value"
                             ValueField="@nameof(SampleModel.Text)"
                             OnChange="@OnDropDownListChange"
                             OnClose="@OnDropDownListClose"
                             Width="160px" />

    </div>
    <div>
        <TelerikButton OnClick="@( () => CloseLog = string.Empty )">Clear Event Log</TelerikButton>
        <p>
            <pre>@CloseLog</pre>
        </p>
    </div>
</div>

@code {
    private List<SampleModel> Data { get; set; } = new();

    private string Value { get; set; } = string.Empty;
    private List<string> Values { get; set; } = new();

    private string CloseLog { get; set; } = string.Empty;

    private bool UseOnClose { get; set; } = true;
    private bool UseOnChange { get; set; }

    [CascadingParameter]
    public DialogFactory? TelerikDialogs { get; set; }

    private async Task OnDropDownListChange(object currentValue)
    {
        CloseLog += $"OnChange {DateTime.Now.ToString("HH:mm:ss.fff")} \n";

        if (UseOnChange)
        {
            await TelerikDialogs!.AlertAsync("OnChange");
        }
    }

    private async Task OnDropDownListClose(DropDownListCloseEventArgs args)
    {
        CloseLog += $"OnClose {DateTime.Now.ToString("HH:mm:ss.fff")} \n";

        if (UseOnClose)
        {
            await TelerikDialogs!.AlertAsync("OnClose");
        }
    }

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

Steps to reproduce:

1. Open the Edit in Telerik REPL link from the demo page for DropDownList - Grouping.
2. Add Filterable="true" to TelerikDropDownList.
3. Run.
4. Open the dropdown.
5. Type in for instance the last item of the list "Röd Kaviar", that belongs to the category "Seafood".

Expected: the group name should change to "Seafood".

Actual: the group name is still "Beverages".

When using the grouped DropDownList and performing a search for a specific element, the DropDownList incorrectly displays the initially shown group instead of the group containing the searched element.

In TelerikSelectBase that the DropDownList inherits, the FieldIdentifier is set only in the OnInitializedAsync method and therefore the FieldIdentitier is never updated. This can cause issues with validation as seen in this example:  https://blazorrepl.telerik.com/GyamPdlf37LXpPAW36.

To reproduce:

• Select the last item in the tree 7.Garden and change the value in the drop down list to Unsupported - the drop down list shows a red border.
• Select item 6.Garden from the tree. (Any item in the tree other than 1 will do) - I expect the drop down to not have the red border, yet is does.

For reference, in the TelerikInputBase, the FieldIdentifier is set in the SetParameterAsync and thus it is accordingly updated. See the TextBox behavior in the above sample.

TlerikDropDownList keyboard navigation works differently from native html select.

In case we have a list with many similar options, for example:
011
021
211
....
In this case with native html select I can type 02 to select 021, but with TlerikDropDownList this would select 211.

If you type swiftly multiple printable characters, the DropDownList keyboard navigation will react only to the first character.

Hi!

When i use combination of LINQ inside TelerikDropDownLists Data attribute and TelerikGrid 's GridEditMode.Popup mode, i get weird behavior when i try to select an item from TelerikDropDownLists - everything freezes. Please check the solution. Everything works fine if i don't use LINQ or GridEditMode.Popup mode.

Thank you!

Using DropDownList with Filter enabled will lost track of Focus when an item from dropdown is selected or tabbing away from filter input.

Steps to reproduce:

1. Open a DropDownList with filter enabled
2. Press TAB

Expected Behavior:

Focus in the next focusable element

Actual Behavior:

Focus is lost, and will go to the browser buttons

It is possible to reproduce in the demos:

https://demos.telerik.com/blazor-ui/dropdownlist/filtering