Multiselect Combobox Not Rendering SelectedItems Properly

[Eren Zede]

Hi everyone,

Let me summarize briefly;

I'm using SfCombobox with InputTextLayout. Also, as can you see in attached file, I'm using stepbar. The problematical combobox in the third step. When it's in third step, not rendering selected items properly. But when I moved in first step it's work fine. I don't know why.

By the way, I checked ViewModels, Bindings, SelectedItems, XAML etc. and I couldn't find anything anormal.

Here is my Style:

<Style x:Key="multiSelectComboboxStyle" TargetType="combobox:SfComboBox">

                <Setter Property="ShowSuggestionsOnFocus" Value="True" />

                <Setter Property="EnableAutoSize" Value="True" />

                <Setter Property="IsEditableMode" Value="True" />

                <Setter Property="AllowFiltering" Value="True" />

                <Setter Property="SuggestionMode" Value="StartsWith" />

                <Setter Property="SelectedDropDownItemColor" Value="#E8E8E8" />

                <Setter Property="SuggestionBoxPlacement" Value="Top" />

                <Setter Property="ComboBoxMode" Value="Suggest" />

                <Setter Property="TextSize" Value="13" />

                <Setter Property="DropDownBorderColor" Value="{StaticResource corporateColor}" />

                <Setter Property="DropDownCornerRadius" Value="8" />

                <Setter Property="DropDownTextSize" Value="13" />

                <Setter Property="MultiSelectMode" Value="Token" />

                <Setter Property="TokensWrapMode" Value="Wrap" />

                <Setter Property="ClearButtonColor" Value="#ACACAC" />

                <Setter Property="Margin" Value="16,0,16,0" />

                <Setter Property="ShowClearButton" Value="True" />

                <Setter Property="HeightRequest" Value="{OnPlatform Android=45, iOS=45}" />

                <Setter Property="IsSelectedItemsVisibleInDropDown" Value="False" />

                <Setter Property="DropDownItemHeight" Value="50" />

                <Setter Property="ShowBorder" Value="False" />

                <Setter Property="TextHighlightMode" Value="FirstOccurrence" />

                <Setter Property="HighlightedTextColor" Value="{StaticResource corporateColor}" />

                <Setter Property="FontFamily" Value="{x:StaticResource Medium}" />

                <Setter Property="MaximumDropDownHeight" Value="200" />

                <Setter Property="TextColor" Value="#313131"/>

                <Setter Property="DropDownTextSize" Value="11" />

                <Setter Property="DropDownItemFontFamily" Value="{x:StaticResource Medium}" />

                <Setter Property="NoResultsFoundFontFamily" Value="{x:StaticResource Italic}"/>

                <Setter Property="NoResultsFoundFontSize" Value="13" />

                <Setter Property="NoResultsFoundTextColor" Value="#B5B5B5" />

            </Style>

Here is my Combobox:

<inputLayout:SfTextInputLayout ContainerType="Outlined"

                                                           AutomationId="InputLayout"

                                                           FocusedColor="{StaticResource corporateColor}"

                                                           ContainerBackgroundColor="Transparent"

                                                           BackgroundColor="Transparent"

                                                           OutlineCornerRadius="8"

                                                           ErrorColor="Red"

                                                           IsHintAlwaysFloated="True"

                                                           Hint="{x:Static Resource:AppResource.Blablabla}"

                                                           FocusedStrokeWidth="1"

                                                           UnfocusedStrokeWidth="1"

                                                           InputViewPadding="{OnPlatform Android='11,2,11,2', iOS='11,2,11,2'}">

                                <combobox:SfComboBox DataSource="{Binding MyList}"

                                                     AutomationId="Combobox"

                                                     SelectedItem="{Binding MySelectedItems}"

                                                     Style="{x:StaticResource multiSelectComboboxStyle}"

                                                     DisplayMemberPath="Text"

                                                     NoResultsFoundText="{x:Static Resource:AppResource.NotFound}">

                                    <combobox:SfComboBox.TokenSettings>

                                        <combobox:TokenSettings FontSize="10"

                                                                BackgroundColor="{StaticResource corporateColor}"

                                                                TextColor="White"

                                                                DeleteButtonColor="{OnPlatform Android='Transparent', iOS='White'}"

                                                                DeleteButtonPlacement="Right"

                                                                CornerRadius="{OnPlatform iOS=11, Android=15}"

                                                                IsCloseButtonVisible="True"

                                                                SelectedBackgroundColor="{StaticResource corporateColor}"

                                                                FontFamily="{x:StaticResource Regular}"/>

                                    </combobox:SfComboBox.TokenSettings>

                                    <combobox:SfComboBox.DropDownButtonSettings>

                                        <combobox:DropDownButtonSettings Width="10" Height="10">

                                            <combobox:DropDownButtonSettings.View>

                                                <Image Source="downArrow"

                                                       HeightRequest="10"

                                                       WidthRequest="10"

                                                       IsVisible="True"

                                                       HorizontalOptions="Center"

                                                       VerticalOptions="Center">

                                                </Image>

                                            </combobox:DropDownButtonSettings.View>

                                        </combobox:DropDownButtonSettings>

                                    </combobox:SfComboBox.DropDownButtonSettings>

                                </combobox:SfComboBox>

                                <inputLayout:SfTextInputLayout.HintLabelStyle>

                                    <inputLayout:LabelStyle FontSize="14">

                                        <inputLayout:LabelStyle.FontFamily>

                                            <OnPlatform x:TypeArguments="x:String" iOS="Regular" Android="Regular" />

                                        </inputLayout:LabelStyle.FontFamily>

                                    </inputLayout:LabelStyle>

                                </inputLayout:SfTextInputLayout.HintLabelStyle>

                            </inputLayout:SfTextInputLayout>

Best Regards.

Attachment: MultiselectComboboxError_56f30489.rar

[Suganya Sethuraman]

Hi Gün,

We have fixed the reported issue. Please find the assembly from the link below.

Assembly Version: 19.4.0.40

Disclaimer: Please note that we have created this patch for the version 19.4.0.40 specifically to resolve the issue reported in this incident.

Please find the assembly from the attachment

Assembly: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBoxAssemblyTokenMode735914281

Note: Please refer to the below link to apply the custom assembly  https://www.syncfusion.com/kb/8279/how-to-apply-the-custom-assemblies-when-configured-the-project-with-syncfusion-nuget

 

Currently, we have patch support only for the main and service pack release version, not for the weekly NuGet release. So only provided an assembly with 19.4.0.40 version.

Could you please check whether the reported issue is resolved or not.

This fix will be included in the next weekly NuGet release, which is scheduled for February 15, 2022. Until then, we appreciate your patience.

Regards,
Suganya Sethuraman. 

[Suganya Sethuraman]

Hi Gün,

We have included the fix in our latest Weekly NuGet release v19.4.0.52 which is available for download (https://www.nuget.org/ ). We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.
 
Regards,
Suganya Sethuraman.