I am using ComboBox and I want to be able to filter by two model properties. To achieve this I have implemented custom filtering through the OnRead event. Additionally, I am ordering the data to first match the results from the one property, which also is used for the TextField, and after that to match the results from the other property. However, when the results are only from the match of the second property, there is no focus.
Here is a REPL example https://blazorrepl.telerik.com/wyaMQhEN108axXJ036
Steps to reproduce the issue:
Type "a": "Value test - ano" has the focus (the first option in the list)
Type "an": "Value test - ano" receives the focus (the first option in the list)
Type "ano": "Value test - ano" receives the focus (the first option in the list)
Type "anot": no item has focus despite the results being only "Another Value - val"
The problematic behavior appears in this specific scenario:
In this case, the custom typed value is lost and the component value is the first item in the list matching the input. Thus, the user cannot set their desired custom value.
Reproduction with steps listed inside: https://blazorrepl.telerik.com/GokVlXEW12KGZ36F15.
===
ADMIN EDIT
===
A possible option for the time being:
Here is a basic sample: https://blazorrepl.telerik.com/wourlNOC51FRcNAX54.
Reproduction: https://blazorrepl.telerik.com/cHbFYUFq53Ext4Yt24.
Steps to reproduce:
I have a ComboBox/DropDownList that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling up the selection box dropdown list. I'm trying to scroll but then resets to the currently selected item making it almost impossible to scroll up. You can use your own demo examples to replicate this issue.
To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo), change the PageSize from 10 to 20. Open the dropdown and select an item. Then, open again the dropdown and scroll slowly up.
When the option "AllowCustom" is enabled for a TelerikComboBox and the user types something above a certain speed, typed characters are lost. Here is a GIF showing the problem on the page https://demos.telerik.com/blazor-ui/combobox/custom-values – I typed "123456", but end up with "1246" instead. In between the input field is showing some weird glitching.
Is there a way to have the TelerikComboBox behave normally, as it apparently did in versions prior to 4.3.0? We noticed this behavior only some time after upgrading from version 4.0.1, where everything still works properly.
I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.
This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.
---
ADMIN EDIT
Here is one workaround you can consider:
https://blazorrepl.telerik.com/QoOAPyEZ233YP2AX19
@inject IJSRuntime js
@* Move this script to a separate JS file *@
<script suppress-error="BL9992">
function getHighligtedComboItem() {
// Get the currently focused item in this particular ComboBox.
var focusedItem = document.querySelector(".select-on-tab .k-list-item.k-focus");
if (focusedItem) {
return focusedItem.innerText;
}
}
</script>
<p>FirstFilteredItem: @FirstFilteredItem</p>
<p>Selected value: @ComboBoxValue</p>
<span onkeyup="@GetFirstFilteredItem">
<TelerikComboBox Data="@ComboBoxData"
Value="@ComboBoxValue"
ValueChanged="@( (int newValue) => ComboBoxValueChanged(newValue) )"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Value)"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
OnBlur="@SelectItemOnTab"
OnOpen="@( () => IsComboBoxOpen = true )"
OnClose="@( () => IsComboBoxOpen = false )"
Placeholder="Select an item..."
ClearButton="true"
Width="200px">
<ComboBoxSettings>
<ComboBoxPopupSettings Class="select-on-tab" />
</ComboBoxSettings>
</TelerikComboBox>
</span>
<input placeholder="another form element" />
@code {
private IEnumerable<ListItem> ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });
private int ComboBoxValue { get; set; }
private string FirstFilteredItem { get; set; } = string.Empty;
private bool IsComboBoxOpen { get; set; }
private async Task GetFirstFilteredItem(KeyboardEventArgs args)
{
if (!IsComboBoxOpen)
{
// Wait at least 300ms, which is the opening animation.
await Task.Delay(400);
}
else
{
// Wait, depending on the typical filtering time.
await Task.Delay(300);
}
// The code that will find the item text depends on the exact scenario and potential use of ItemTemplate.
FirstFilteredItem = await js.InvokeAsync<string>("getHighligtedComboItem");
}
private void SelectItemOnTab()
{
if (!string.IsNullOrEmpty(FirstFilteredItem))
{
// Match the filter operation to the filter operator of the ComboBox.
var matchingItem = ComboBoxData.Where(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant())).FirstOrDefault();
if (matchingItem != null)
{
ComboBoxValue = matchingItem.Value;
FirstFilteredItem = string.Empty;
}
}
}
private void ComboBoxValueChanged(int newValue)
{
ComboBoxValue = newValue;
FirstFilteredItem = string.Empty;
}
public class ListItem
{
public int Value { get; set; }
public string Text { get; set; } = string.Empty;
}
}
An open ComboBox will not close when the user tabs out of it when the ComboBox is the last component on the page. Here is a test example: Creating Blazor ComboBox
If there is another component after the ComboBo, then tabbing out works correctly.
The popup window is not closed when the ComboBox is disabled from code.
Reproduction code:
Selected value: @selectedValue
<br />
<TelerikComboBox Data="@myComboData"
TextField="MyTextField"
ValueField="MyValueField"
Value="selectedValue"
ValueChanged="@((int value) => ValueChangedHandler(value))"
Placeholder="Select an item..."
ClearButton="true"
Enabled="@isEnabled"
Filterable="true">
</TelerikComboBox>
@code {
public bool isEnabled { get; set; } = true;
IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
int selectedValue { get; set; } = 3; //usually the current value should come from the model data
public async Task ValueChangedHandler(int value)
{
isEnabled = false;
await Task.Delay(4000); //simulate network delay
selectedValue = value;
isEnabled = true;
}
//in a real case, the model is usually in a separate file
//the model type and value field type must be provided to the dropdpownlist
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
When the height of the popup is set to 'auto' and it opens upwards, the resizing process causes it to be incorrectly positioned.
# Reproduction:
1. Open this REPL - https://blazorrepl.telerik.com/mHuoPRFk52ienlUt52
2. Shrink the browser so that the ComboBox remains at the bottom of the window:
3. Type "item 2" in the ComboBox
I'd like to report a bug with the Telerik combo box opening animation.
The problem can be reproduced on your page https://demos.telerik.com/blazor-ui/combobox/templates
Reproduction steps
1. Open page https://demos.telerik.com/blazor-ui/combobox/templates
2. Change the window to restored mode
3. Open the Product combo box and observe that the popup animation works as expected
4. Resize the window slightly vertically
5. Open the Product combo box
6. Observe that the combo box popup animation starts in the wrong place
This issue is 100% reproduceable every time and also can be reproduce if the popup is opened and the window is maximized.
Please see the attached video from about 15 to 25 seconds. Note that I reproduce the issue in the video a couple of times however due to the quality of it you can only see the incorrect animation between 15 to 25 seconds.
I hope the information helps.
The tablet that I am using is slightly wider than the medium breakpoints set in AdaptiveMode.Auto. However, I still want to show the action sheet. I'd like to be able to configure the breakpoints which are currently hard-coded.
===
ADMIN EDIT
===
The request is opened for ComboBox but it also targets other selects and pickers that have AdaptiveMode feature. For example, DropDownList, MultiSelect, DatePicker and more.
When selecting an item with the Enter key, the value is not displayed in the input field.
ReproductionThe item is selected, but its value is not displayed inside the input field.
===
The issue is also reproducible with the MultiColumnComboBox component.
Description
When selecting a value via the keyboard, the input element is out of sync.
Reproduction (if bug)
1. Create a Combobox and populate it with data.
2. Trigger a change with the keyboard.
3. The value is updated but the input holds the old value and is out of sync.
REPL for reproduction:
https://blazorrepl.telerik.com/GnEnPZun00tsuQEA47
Hello,
iam found "strange" behaviour compared to previous versions in combobox, with custom paging, filtering, valuemapper.
"simple description":
- Do not call OnRead and ValueMapper AFTER clicking/selecting the ITEM in any case(after filtering, or after scrolling...). Do it same way as selecting WITHOUT prior filtering.
Complex test
A sample for testing is here(and comments inside):
https://blazorrepl.telerik.com/GGPwalvk09g228sm32
How to reproduce:
1 - start = value is PREselected - OK
2 - clear the combobox - OK
2 - input value 40 - slowly do not rush, number by number - OK
3- wait 2 seconds and Click/select item ("Name 401" etc) - NOK
observe the events fired(Exception/info: time - indicates that OnRead was fired again)
Repeat the same WITHOUT filtering, just scrolling
observe the events fired = looks ok (Exception/info: time)
When selecting item by CLICKING on it(after filtering) looks like those events are fired:
- ValueMapper (why?)
- OnRead again(why again?)
- bind value (ok)
and sometimes ValueMapper again
it depends of "timing"
expected:
When selecting item by CLICKING on it:
- BIND the value. Everything is in there(no reason to call OnRead or ValueMapper)
Related, unexpected(video attachment):
Also when working in "real" scenario, AFTER clicking on item AFTER filtering, it returns full MODEL assembly path into to input filed, instead of clicked item
Lets have a list: {Name of the item,Another item,Next item}
entere in combobox/filter "name", results are shown ok, clicked on one and result shuld be ("Name of the item"), after clicking it returns "base model class name"
ie: "inwApp1.Pages.prozam.crm.EdcrmOrg+BaseKeyModel" - you dont want to see this :) .
There is different event orders for those 2 scenarios(it should be the same for both as at point 1) ):
1) when SELECTing item without filtering(just moving with scrollbar down to value 401 (only with onread and virtual paging)) = OK
2) when filtering by value "40" and SELECTing item by clicking on it - NOT OK = it look like this causes the problems and subsequent event calls
Is there any workaround, or new "property" to set? Thanks
When the user selects a value and then focuses on another component the OnBlur of the ComboBox is not triggered. The issue is reproducible in the Firefox browser (tested with version 109.0).
To reproduce the issue open the following REPL example in the Firefox browser:
https://blazorrepl.telerik.com/mdklmHYN06lVQjyL26
Select a value in the first ComboBox and then focus on the second ComboBox. The OnBlur event should trigger.
Hi,
EDIT: This issue (of course) relates to the case where the combobox has data selected when rendering.
The clear button of the combobox behaves in a way that I find strange, and which prevents us to get the desired behaviour in our application.
It is easily reproducable with your demo here:
https://demos.telerik.com/blazor-ui/combobox/templates
When loading the page there is no clear button, which I think is wrong. Especially since it is not even in the DOM, so it cannot be made visible with styling. When clicking in the field, the clear button appears, and it stays there when changing focus to elsewhere, which seems inconsistent.
In other words, the span of the button (in the red box below) only appears when the combobox has had focus.
Thanks,
Niels
I would like the ability to flag elements in a data bound combo that are no longer available as disabled and not selectable. Had they been previously selected, they still need to show, but should not allow a user to select it again.
I would like a property that can be set when databinding a combo.
For instance when you set the Data, TextField, & ValueField properties, can there also be one for SelectableField (or something) - this could be mapped to a Boolean in the dataset.
If this property isn't used then it defaults to yes (ie they are all selectable), but if it is used, then any items which have this field set to 'no' then they show as a different color (could just be grey) but are not selectable by the user.
If they had previously been selected (prior to being marked as no longer available) then they should show when the record is loaded, but otherwise they are not selectable.
I don't particularly want to write code on click to see if its enabled and then unselect it, I would prefer it to simply be built into the base control.
Is this possible? Or is there another property already there that does this?