I am using a ComboBox with filtering to list all possible values, but when I select one, the value is added to another list. That works fine, but I would like to clear the ComboBox afterwards (and display the Placeholder). When I do this by setting the All_SelectedItem to null, it seems to trigger a new value getting selected - the first on the All_Items list. The use case would be that the box is now empty and ready for the user to start typing the next value they want to filter for.
is it not possible to clear the selected item without having it select the first entry automatically?
<SfComboBox DataSource="@All_Items" @bind-Value="@All_SelectedItem" PopupHeight="300px" AllowFiltering=true Placeholder="add dimension" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"></SfComboBox>
Hi Mike,
Query: is it not possible to clear the selected item without having it select the first entry automatically?
To better understand your exact requirement, we suggest that you provide us with a video or image representation that clearly depicts your needs in detail. Once we receive this, we will be able to update you on the progress of your request and provide you with the best possible solution.
Regards,
Sureshkumar P
What I am trying to do is to create a 2-part UI experience as shown. The ComboBox offers excellent type-to-filter and arrow key selection. Selected values are inserted into a ListBox below that can be reordered with drag-drop or allow selected items to be deleted.
Everything works except when you select a field with the ComboBox, the selected item remains selected. I want it to revert back to a clear state, showing the Placeholder so the user can simply start typing again without clearing the previous value.
I find I cannot bind @bind-Value or @bind-Index and use that to try to clear the selection. Is there another way?
One additional piece of information -- even if I use a ValueChanged event with listObj.ClearAsync() to clear the ComboBox, when I change focus to a different element in the UI, it selects the first entry in last-filtered/displayed dropdown list. This looks like a bug, so I will add that I am using v20.4.0.51
Mike, we suggest you use our popup close event to achieve your requirement.
Find the code example here:
<span>Country: @comboval</span>
<SfComboBox AllowFiltering="true" @bind-Value="comboval" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Countri">
<ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
<ComboBoxEvents TValue="string" TItem="Countries" Closed="PopupClosed" ></ComboBoxEvents>
</SfComboBox>
@code { void PopupClosed(ClosedEventArgs args) { this.comboval = null; } public string comboval { get; set; }
public class Countries { public string Name { get; set; }
public string Code { get; set; } }
List<Countries> Countri = new List<Countries> { new Countries() { Name = "Australia", Code = "AU" }, new Countries() { Name = "Bermuda", Code = "BM" }, new Countries() { Name = "Canada", Code = "CA" }, new Countries() { Name = "Cameroon", Code = "CM" }, new Countries() { Name = "Denmark", Code = "DK" }, new Countries() { Name = "France", Code = "FR" }, new Countries() { Name = "Finland", Code = "FI" } };
}
|
Find the sample in the attachment:
For anyone else seeing the odd behavior of spurious values getting added when changing focus, the solution is to use the Closed event as suggested, and to get the value from the list object before you null it.
e.g.
void PopupClosed(ClosedEventArgs args)
{
otherlistbox_items.Add( this.comboval.Value );
this.comboval = null;
}
Mike, as per your request we have updated the sample code by resetting the component value after the popup close. We suggest you can get the selected value before reset to the component with a popup close event using OnValueSelect event.
Find the code changes here:
SfComboBox AllowFiltering="true" @bind-Value="comboval"TValue="string" TItem="Countries"Placeholder="e.g. Australia" DataSource="@Countri">
<ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
<ComboBoxEvents TValue="string" TItem="Countries" Closed="PopupClosed" OnValueSelect="ValueSelectHandler" ></ComboBoxEvents>
</SfComboBox>
@code { public string SelectedValue { get; set; } = ""; public string SelectedTextValue { get; set; } = "";
void ValueSelectHandler(SelectEventArgs<Countries> args) { this.SelectedValue = args.ItemData.Code; this.SelectedTextValue = args.ItemData.Name; } void PopupClosed(ClosedEventArgs args) { this.comboval = null; } public string comboval { get; set; }
public class Countries { public string Name { get; set; }
public string Code { get; set; } }
List<Countries> Countri = new List<Countries> { new Countries() { Name = "Australia", Code = "AU" }, new Countries() { Name = "Bermuda", Code = "BM" }, new Countries() { Name = "Canada", Code = "CA" }, new Countries() { Name = "Cameroon", Code = "CM" }, new Countries() { Name = "Denmark", Code = "DK" }, new Countries() { Name = "France", Code = "FR" }, new Countries() { Name = "Finland", Code = "FI" } };
} |
Find the modified sample in the attachment: