[Windows (WinUi3) only] SfComboBox, select an item, clear, ends up with an empty list

[Fabrice]

In a Windows (WinUI 3) application, using the SfComboBox control (26.2.11), you can select an item, clear the selection, and end up with an empty list (you can no longer select an element).

Simple example:

    <combobox:SfComboBox IsEditable="false" Grid.Row="1" >

        <combobox:SfComboBox.ItemsSource>

            <x:Array Type="{x:Type x:String}">

                <x:String>Uganda</x:String>

                <x:String>Ukraine</x:String>

                <x:String>United Arab Emirates</x:String>

                <x:String>United Kingdom</x:String>

                <x:String>United States</x:String>

            </x:Array>

        </combobox:SfComboBox.ItemsSource>

    </combobox:SfComboBox>

[Hariharan Chokkalingam]

Hi Fabrice,

 

Thank you for reaching out to us. We have investigated your queries based on your update and have drafted a sample using the latest Microsoft.WindowsAppSDK version 1.5.240627000 on the Windows platform in .NET MAUI. However, we were unable to reproduce the issue you mentioned.

 

To assist you further, please provide us with the complete code or a sample that demonstrates the issue, along with the steps to replicate it. Additionally, could you please specify the version of the Microsoft.WindowsAppSDK you are currently using where the issue occurs in .NET MAUI SfComboBox? This will allow us to thoroughly investigate and provide a more accurate solution.

 

For your convenience, we have included the tested sample and a demonstration video as attachments. Please review the attached files and let us know if you have any concerns. If necessary, feel free to make any required modifications and share the updated sample with us. This will enable us to investigate further and provide an effective solution.

 

Please don’t hesitate to contact us if you have any further questions.

 

Regards,

Hariharan.

Attachment: Reference_26c88208.zip

[Fabrice]

Hi Hariharan,

I slightly modified your attached project in order to reproduce the bug: I narrowed down the problem and it seems that it only occurs if it is inside a CollectionView or ListView (but does works inside other controls such as Stacklayout or a syncfusion SfListView):

 <CollectionView

     ItemSizingStrategy="MeasureAllItems"

     SelectionMode="None" >

     <CollectionView.ItemsSource>

         <x:Array Type="{x:Type x:Int32}">

             <x:Int32>1</x:Int32>

             <x:Int32>2</x:Int32>

             <x:Int32>3</x:Int32>

         </x:Array>

     </CollectionView.ItemsSource>

     <CollectionView.ItemTemplate>

         <DataTemplate>

             <VerticalStackLayout>

                 <Label Text="{Binding .}"></Label>

                 <combobox:SfComboBox IsEditable="false">

                     <combobox:SfComboBox.ItemsSource>

                         <x:Array Type="{x:Type x:String}">

                             <x:String>Uganda</x:String>

                             <x:String>Ukraine</x:String>

                             <x:String>United Arab Emirates</x:String>

                             <x:String>United Kingdom</x:String>

                             <x:String>United States</x:String>

                         </x:Array>

                     </combobox:SfComboBox.ItemsSource>

                 </combobox:SfComboBox>

             </VerticalStackLayout>

         </DataTemplate>

     </CollectionView.ItemTemplate>

 </CollectionView>

[Hariharan Chokkalingam]

Hi Fabrice,

Thank you for your update. We have updated the sample with your latest code. We would like to inform you that when you clear the text and end up with an empty list, this scenario issue occurs because, after clearing the dropdown does not open when the control is focused inside the CollectionView DataTemplate. This is why it appears as an empty list. However, when you click on another control or item and focus elsewhere, the issue does not occur, and it also does not occur when IsEditable is set to True.

To resolve this issue, we suggest a workaround: manually unfocus the control if the text is empty and the dropdown is not opened, using the Focused event in SfComboBox.

Please refer to the code snippet, output video, and attached sample for more details:

//XAML

…
<combobox:SfComboBox IsEditable="False" Focused="SfComboBox_Focused"…/>

….

//C#
 

  private void SfComboBox_Focused(object sender, FocusEventArgs e)

  {

      if (sender is SfComboBox comboBox)

      {

          if (string.IsNullOrEmpty(comboBox.Text) && !comboBox.IsDropDownOpen)

          {

              comboBox.Unfocus();

          }

      }

  }

 

Please let us know if the provided suggestion helps resolve your query. Feel free to contact us if you have any further concerns or questions.

Regards,

Hariharan C.

Attachment: Reference_7642738a.zip

[Fabrice]

Hi Hariharan,

The workaround you suggested works like a charm. I tested it on Android as well, and it appears to have no adverse effects on that platform.

Thanks!

[Preethi Rajakandham]

Hi Fabrice,

You're welcome. 

We are glad that the provided response meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out. 

Regards,

Preethi R