We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Clear ComboBox selection after item selected

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>


6 Replies

SP Sureshkumar P Syncfusion Team February 27, 2023 10:39 AM UTC

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



MI Mike February 27, 2023 02:32 PM UTC

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?

syncfusion-example-ui.png



MI Mike February 27, 2023 02:57 PM UTC

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



SP Sureshkumar P Syncfusion Team February 28, 2023 11:04 AM UTC

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:



Attachment: DDLServer_a3f3f7d4.zip


MI Mike replied to Mike February 28, 2023 04:25 PM UTC

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;

    }



SP Sureshkumar P Syncfusion Team March 1, 2023 11:15 AM UTC

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:


Attachment: DDLServer_38e37330.zip

Loader.
Up arrow icon