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.

Hi,

We are using the DropDownList component as an inline editor in the grid, for managing a product hierarchy. Previously we were using the DropDownList with grouping enabled, without virtualization, but due to volume of data we now need to use virtualization.
This does not work with grouping at the moment.

At the bottom of this page it is mentioned that 'Virtual scrolling with grouping will be supported in a future version.'.

Any timeline on this feature?

KR,

Lennert

Currently, a TextField value of empty string will produce a blank item in the dropdown.

On the other hand, a null TextField value will produce the fully qualified class name.

Here are possible workarounds: https://blazorrepl.telerik.com/myOlFpFb1465jW8E07

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.

At the moment, typing with the keyboard focuses the first item that starts with the last letter you pressed. To focus the next one you should either use Down Arrow, or type the same letter again.

I would like it to behave like the regular <select> or like a combo box with filtering - typing characters quickly should highlight the item that begins with all those characters, instead of using only the first letter.

=== 

Admit edit: some keywords for better findability: DropDownList keyboard search filter accessibility

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

The DropDownList component is too basic to be used in complex environments. In the real world, no one is binding DropDownLists to List<string>, they are binding to complex datatypes, and the ability to do so has been present in MVC apps for a long time.

Given the following code, it is possible to bind to a List<object>, and two-way bind to the object that was selected.

	<select @onchange="@OnChangedAsync">
		<option></option>
		@if (DataSource != null)
		{
			@foreach (var item in DataSource)
			{
				<option @key="item" value="@optionValueFunc(item)" selected="@(item.Equals(SelectedItem))">@optionTextFunc(item)</option>
			}
		}
	</select>

	#region Private Members

	private Func<TSource, object> optionTextFunc;
	private Func<TSource, object> optionValueFunc;
	private TSource selectedItem = default(TSource);

	#endregion

        #region Public Parameters

	/// <summary>
	/// A List of objects to bind against.
	/// </summary>
	[Parameter]
	public IList<TSource> DataSource { get; set; } = new List<TSource>();

	/// <summary>
        /// A lambda expression referencing the property containing the text to display to the end user. Example: @(c => c.DisplayName)
        /// </summary>
        [Parameter]
        public Expression<Func<TSource, object>> OptionText { get; set; }

	/// <summary>
        /// A lambda expression referencing the property containing the value for this object, usually an identifier. Example: @(c => c.Id)
        /// </summary>
        [Parameter]
        public Expression<Func<TSource, object>> OptionValue { get; set; }

	/// <summary>
        /// The item from the <see cref="DataSource" /> that has been selected.
        /// </summary>
        [Parameter]
        public TSource SelectedItem { get; set; }

	/// <summary>
	/// The callback event required for two-way binding.
	/// </summary>
	[Parameter]
        public EventCallback<TSource> SelectedItemChanged { get; set; }

        #endregion

	private async Task OnChangedAsync(ChangeEventArgs changeEventArgs)
        {
            await UpdateSelection(DataSource.FirstOrDefault(c => optionValueFunc(c).ToString() == changeEventArgs.Value.ToString()));
        }

	private async Task UpdateSelection(TSource item)
        {
            selectedItem = item;
            await SelectedItemChanged.InvokeAsync(selectedItem);
        }

	protected override async Task OnInitializedAsync()
	{
            if (optionTextFunc == null && OptionText != null)
            {
                optionTextFunc = OptionText.Compile();
            }
            if (optionValueFunc == null && OptionText != null)
            {
                optionValueFunc = OptionValue.Compile();
            }
            await Task.CompletedTask;          
        }

Would really appreciate it if you would consider adding this to the next release.

The DropDownList remains open after tabbing and does not fire. It also won't fire OnBlur and OnChange in this case. The problem occurs only if the component was opened by clicking exactly on its arrow.

Here is a test page: https://blazorrepl.telerik.com/cxEfFVPq042owTt616

The workaround is to wrap the component in a <span> that handles @onfocusout and closes the component programmatically: https://blazorrepl.telerik.com/cnafPCYL21aT3fpD05

Hi,

Is it possible to implement search/look-ahead in the current version of the DropDown component? If not, will you be adding this feature soon?

Thank you.

Ben

Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.

But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.

My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.

Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.

***Admin Edit***

Released in 3.0.0 through PopupSettings tag: https://docs.telerik.com/blazor-ui/upgrade/breaking-changes/3-0-0#popup-settings

***Admin Edit***

This will allow the dropdown to be large enough to fit a reasonable number of items without a scrollbar. Alternatively, you could limit it through a pixel value you can set, or through the MaxPopupHeight property if it gets implemented: https://feedback.telerik.com/blazor/1412653-maxpopupheight.

The drop down list component does not allow the user to associate a label with the underlying html select input control, which goes against accessibility standards. It appears that most, if not all, of the other components follow the accessibility standards. Please fix the drop down list and/or allow attribute splatting so that developers can apply their own attributes (like aria-label) to meet accessibility standards.

The DropDownList triggers exceptions if there are no items in the dropdown and one tries to use keyboard navigation:

• up/down arrows to change the selected item, no matter if the component is open or not
• Enter after filtering for non-existent item

Here is a test page. A possible workaround is to set DefautText, so that the dropdown always contains at least one  item.

Open and press Enter, Up or Down:

<TelerikDropDownList Data="@( new List<string>() )"
                     @bind-Value="@SelectedValue"
                     TItem="string"
                     TValue="string"
                     Width="200px" />

<br /><br />

Open, filter by something non-existent and press Enter, Up or Down:

<TelerikDropDownList Data="@DropDownData"
                     @bind-Value="@SelectedValue"
                     TItem="string"
                     TValue="string"
                     Filterable="true"
                     Width="200px" />

@code {
    string SelectedValue { get; set; }

    List<string> DropDownData = new List<string>()
    {
        "foo",
        "bar",
        "baz"
    };
}