When a user quickly enters a filter and immediately tabs to the next element, the popup remains open instead of closing as expected

Here are some details on the issue I am referring to:

• The problem only occurs when there is at least one item selected.
• If the focus is on the chip/selected item, you can properly navigate back to the previous input with Shift+Tab.
• If the focus is on the input, though, then you cannot use Shift+Tab to navigate back to the previous input/focusable element.

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

The MultiSelect displays initially selected items in the order in which the items occur in the data source. For example:

• The MultiSelect contains items 1, 2, 3, 4, 5.
• The user selects 4, 1, 3 in this order.
• The next time the user visits the MultiSelect page, the component will show 1, 3, 4 as selected.

In some scenarios it's important to preserve the original order of the selected items, so that it matches the users' personal preferences, perceived item importance or simply the selection history.

In the meantime, a possible workaround is to reorder the data source items, which are initially selected:

https://blazorrepl.telerik.com/GIblPeuN077ScRTt53

When the multiselect is partially hidden by a scrollbar and you try to remove an item from the top, it will move the focus to the bottom of the control and open the dropdown, but it will not remove the item that you just tried to remove. 

My question is regarding MultiSelect. I would like to order the groups inside the MultiSelect as follows:

Category 2

- Item 1

- Item 2

Category 1

- Item 3

- Item 4

But the MultiSelect control seems to order the category name alphabetically (Category 1, Category 2, etc).

The dropdown (select) components such as ComboBox, MultiSelect etc. have a built-in loading indicator that includes several Skeleton instances.

I want to be able to remove that and add my custom loading indicator in the popup. Ideally, it would be a template so we could have some flexibility.

===

ADMIN EDIT

===

This request targets all the select components (AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect).

The DropDownList currently does not have a built-in loader but that will be added as well as a prerequisite for the current feature. See Add a loading indicator in the popup.

When I click on the CheckBox's label, "Select All," the dropdown closes. While if I click the TelerikCheckBox itself, it remains open.

===

TELERIK EDIT

Possible workarounds include:

• Wrap the clickable UI in the MultiSelect HeaderTemplate in an element with a tabindex attribute: https://blazorrepl.telerik.com/mfOlnvFk40G8PElJ33
• Cancel the MultiSelect OnClose event conditionally: https://blazorrepl.telerik.com/QpYvxvla44M3nsdp57

Our issue is when we are using OnRead for fetching data based on the entered text, the keyboard navigation is not working. The scroll mode is virtual. The volume of data will be large.

Testing this Select All Checkbox sample in Safari produces a different result compared to other browsers.

Click on the CheckBox in the MultiSelect Header Template closes the popup in Safari. In other browsers (e.g. Chrome, Firefox) the popup remains open after checking the SelectAll CheckBox.

Description

In Firefox, there are occasions in which multiple items remain focused (k-focus class is not removed from the blurred item)

Reproduction (if bug)

1. Create a multiselect and set AutoClose="false".
2. Open the component and select a few items.
3. Close the component.
4. Open the component and select a new item.
5. Two items have the k-focus class.

Second related case:

1. Create a multiselect and set AutoClose="false".
2. Open the component and navigate up and down with the keyboard arrows.
3. Select an item.
4. The last focused item with the arrows is focused as well as the newly selected item.

REPL for reproduction

Expected (if bug)

Only one item should have the k-focus class at a time.

Browser (if bug)

Firefox

Broken Telerik UI for Blazor version (if bug)

3.5.0

The following, took a bit of effort to identify where the behaviour was failing for a screen reader.

 

for all scenarios below the multi-select component currently has items (more than one) in it as selected.

 

GOOD

if keyboard focus is on text edit, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab keys) all selected items are read out correctly

 

BAD

if keyboard focus is on selected item, and u leave the component (w/ tab key), when revisiting the component (w/ shift+tab key) the focused (selected) item is not read out correctly.

(sorry example read out not provided)

GOOD

selected items are read out correctly when;

• closing items panel w/ escape key,
• closing items panel when selecting an item
  

 

BAD

delete item;

• remove all selected items w/ escape key does not inform a screen reader user of the outcome; that no item is now selected (should state something).

• removing last item with backspace does not inform screen reader of the outcome; that no item is now selected (should state something). I swear this worked once with firefox.
  

the following behaviour also occurs after removing all items via a keyboard, the keyboard focus becomes lost;

• (BAD) most times u can't press a right / down key into the text section of the multi-select (experienced w/ firefox too)
• (GOOD) most times can press alt+down to bring the panel (experienced w/ firefox too)
• (GOOD) u can still tab out to next clickable object

Hi,

I would like checkbox support including the check all checkbox on the multiselect component like: https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support

The url below shows how to create custom checkboxes in the multiselect component but adding a check all checkbox in the headertemplate does not update the multiselect popup

https://docs.telerik.com/blazor-ui/knowledge-base/multiselect-checkbox-in-dropdown?_ga=2.50111909.206897922.1631541466-694624900.1630583797&_gac=1.246637872.1631604077.EAIaIQobChMI8PnX6Pb98gIVkwCLCh381AjMEAAYASAAEgLROPD_BwE

I have a custom ICollection which I wanted to use with the MultiSelect control, however, the Value property is of type List<T>. This is very restrictive; the property should implement an interface for flexibility.

ADMIN EDIT: When voting, please add your comment on what you would prefer so we can gauge the needs people have and act accordingly.