Issues using SFComboBox when multiselect and filtering enabled

I have a SFComboBox (version 26.2.14) with SelectionMode="multiple" and IsFilteringEnabled="True"

   <control:SfComboBox

        x:Name="treatmentComboBox"

        IsFilteringEnabled="True"

        DelimiterText="/"

        DisplayMemberPath="Description"

        FontSize="14"

        HeightRequest="50"

        IsEditable="False"

        MultiSelectionDisplayMode="Delimiter"

        PlaceholderColor="Gray"

        SelectedItems="{Binding SelectedTreatments}"

        SelectionMode="Multiple"

        TextMemberPath="Description"

        WidthRequest="320" />

</VerticalStackLayout>

The filtering works as expected, however when i try to enter a second item i have issues. There is no delimiter added by default to the text in the combobox - so just typing returns a drop down list saying no items found. If I add a delimeter, the whole text is automatically selected and typing clears the text.
So to use this control, i need to tell my users to add a delimeter then deselect all the text then type on the right of the delimeter just added.
Ideally, i would like to be able to stop the selection of all the text when a delimeter is typed or automatically add a delimeter after the text is selected. Is this possible or is there a better solution


3 Replies

AA Aarthi Arjunan Syncfusion Team January 17, 2025 10:58 AM UTC

Hi Simon,

 

Thank you for reaching out to us. We have reviewed your query and understand your requirement to prevent the selection of all text and automatically add a delimiter after an item is selected.

 

We would like to inform you that the requested behaviors are the default functionality of the control. To stop the selection of all text in the textbox, we modified the sample by enabling CustomFiltering and setting the TextSearchMode property to Contains. TextSearchMode to contains avoids the automatic text selection. Additionally, by using CustomFiltering, we were able to achieve the desired StartsWith search behavior. Please refer to the attached sample for more details.

 

Please let us know whether the provided suggestion helps to resolve your query. Please don’t hesitate to contact us if you have any concerns or queries.

 

Regards,

Aarthi A.


Attachment: ComboBoxSample_e56ed6ed.zip


SL Simon Lewis January 24, 2025 09:15 AM UTC

Thanks for the sample - it was really helpful.
I would really like to make the dropdown disappear after the user clicks on a selected item and for a delimeter to be automatically added so they can start typing a search argument for the next item. The lists we use are quite long and presenting a full list is unlikely to every be useful.
Also, the dropdown seems to automatically appear when you open the page even if IsDropDownOpen is set to false. Is it possible to change this behaviour?



KP Kamalesh Periyasamy Syncfusion Team January 28, 2025 04:46 PM UTC

Hi Simon,

 

Query 1: Make Dropdown Disappear and Add Delimiter After Item Selection

 

We have reviewed your query and addressed it by utilizing the ComboBox's SelectionChanged event. In this implementation:

  • The dropdown is programmatically closed by setting IsDropDownOpen to false after the user selects an item.
  • Additionally, we ensure that a delimiter is automatically appended to the ComboBox entry if it is missing. This enhancement improves the user experience by allowing the user to seamlessly type the next search argument without manually adding the delimiter.

 

We have attached the modified sample for your reference. Kindly review it and let us know if it resolves your issue.

private async void treatmentComboBox_SelectionChanged(object sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)

{

   if(sender is SfComboBox combobox)

   {

      combobox.IsDropDownOpen = false;

      await Task.Delay(15);

      if(!string.IsNullOrEmpty(combobox.Text) && !combobox.Text[combobox.Text.Length - 1].ToString().Equals(combobox.DelimiterText))

           combobox.Text += combobox.DelimiterText;

    }

}

Query 2: Dropdown Opens Automatically on Page Load

 

We require further clarification regarding the behavior you are observing:

  • Does the dropdown open automatically during page navigation?
  • Or does this occur when the main page is rendered in the view?
  • Additionally, could you specify the platform you are working on (e.g., Android, iOS, Windows, etc.)?

 

 it will help us conduct a more thorough investigation.

 

Regards,

Kamalesh P



Attachment: ComboBoxSample_662ad9be.zip

Loader.
Up arrow icon