The OnBlur event does not fire after removing an item wehn using TagMode="@MultiSelectTagMode.Single"
I used this snippet in the Blazor REPL to reproduce the issue:
<p>@OnBlurMessage</p>
<TelerikMultiSelect Data="@Countries"
@bind-Value="@SelectedCountries"
TagMode="@MultiSelectTagMode.Single"
Placeholder="Enter Balkan country, e.g., Bulgaria"
Width="350px"
ClearButton="true"
AutoClose="false"
OnBlur="OnBlurHandler">
</TelerikMultiSelect>
@code {
private List<string> Countries { get; set; } = new List<string>();
private List<string> SelectedCountries { get; set; } = new List<string>();
string OnBlurMessage {get; set;} = "";
int i;
protected override void OnInitialized()
{
Countries.Add("Albania");
Countries.Add("Bosnia & Herzegovina");
Countries.Add("Bulgaria");
Countries.Add("Croatia");
Countries.Add("Kosovo");
Countries.Add("North Macedonia");
Countries.Add("Montenegro");
Countries.Add("Serbia");
Countries.Add("Slovenia");
base.OnInitialized();
}
void OnBlurHandler()
{
OnBlurMessage = $"OnBlurHandler touched {++i} times";
}
}
Steps to reproduce:
The OnBlur event should fire after step 2.
Attached is a short video clip of what I see.
By design, the filter should be cleared when the user blurs the component. The filter is currently persisted and this is not correct.
Reproducible in the filtering demo.
We are happy with PersistFilterOnSelect, now the filter is more useful for a multi selection.
It is not wanted that the filter text is still there if the selection list is closed!! Please allow clearing the filter value upon closing.
===
ADMIN EDIT
===
The only possible way to currently clear the filter is to force the component re-render upon closing.
Here is an example: https://blazorrepl.telerik.com/GeusuFbQ4971bi9S29.
The https://feedback.telerik.com/blazor/1517344-filter-text-is-cleared-when-you-select-an-item ticket fixed a good usability issue with multiselect. Unfortunately, it creates a bug I ran into while starting to update my applications MultiSelects.
If you have PersistFilterOnSelect=true property set, but not AutoClose=false what happens is the user types '2' to filter the selection, selects something with the mouse and the drop down closes, but the filter doesn't clear so when next trying to select an item the old filter is still there, although it's not showing. The only way to clear the ghost filter seems to be to start typing a new thing to filter on and then backspace that which finally removes the ghost.
The docs kind of mention this with "To keep the filter upon selection, set the PersistFilterOnSelect parameter to true. It only applies when Filterable="true" and AutoClose="false"" but the ghost filter staying is clearly a bug. You can test this behaviour with a repl I made. Click the multiselect active, type for.ex. '2' and select an item with the mouse, the item is selected, the dropdown closed and the filter vanishes. Now click the multiselect again, the dropdown is already filtered as if '2' had been pressed, but it's not visible and can't be cleared without typing a new filter
Below is a screenshot where I typed 22 as the filter, selected Item 22 and then clicked the MultiSelect again
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.
I have set a small size to the MultiSelect. I noticed that the Summary Tag that contains the "1 more selected" text does not change - its size always remains the same regardless of the component size.
Reproduction: https://blazorrepl.telerik.com/cxFvPxvh58SMoekS04.
The Roundness setting of the MultiSelect also does not affect the summary tag.
When AutoClose is set to false and you select more than one item, then only the first one will be highlighted in the popup. Items are selected and present in the input but are visually highlighted.
Reproduction
1. Run this REPL sampleTesting 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.
Telerik Multi Select to have optional top level header item with check box & title "Select All" [Localizable].
If all items are selected, the display box of the Multi-Select should show "All Selected" instead of list of selected items.
To reproduce:
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)
Second related case:
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
This appears to be documented behavior, but it also seems to me like this is something that the component should be handling.
When using row virtualization with a Grid, a DropDownList, a MultiSelect, etc, the OnRead is called for every scroll event, regardless of whether the component _actually_ needs to fetch new data or not.
For example: A DropDownList with a PageSize of 100, but with only 10 items visible in the dropdown at a time will ask for 100 records every time the user even scrolls 1 record down. This results in many requests to the backend server, with many of the results being the majority of the contents from the previous request.
I have worked around this by implementing a buffer that keeps results for me and returns them as the user scrolls, only requesting for more from the backend server when the buffer runs out, but this feels like something that the components themselves should be handling.
If this is expected behavior, all good. Just wanted to raise some awareness on it.
Using row virtualization on MultiSelect, and am attempting to put a loading indicator into the popup content if the request to the server is still ongoing.
Problem with this is that the popup contents don't update if the popup is open when loading finishes. I put together a reproduction on Telerik REPL showing the behavior I am experiencing.
https://blazorrepl.telerik.com/mvvQvVvN2458vinQ36
Note, Options finish loading (seen by the div update above the MultiSelect component), but if the popup is open, the contents do not update to reflect the loaded options.
My current workaround is to just make the MultiSelect disabled while it is doing its initial load.