[ItemsRepeaterExtensions.SelectedItem] Only works if it's put below the Itemsource

[Marc-Antoine-Soucy]

Current behavior

<muxc:ItemsRepeater utu:ItemsRepeaterExtensions.SelectedItem="{Binding Test, Mode=TwoWay}" utu:ItemsRepeaterExtensions.SelectionMode="SingleOrNone" ItemsSource="{Binding Tests}">

The selected item will not be set if it's put like this.

Expected behavior

It should be documented that it only works if you set the itemssource first or it should work in any order

How to reproduce it (as minimally and precisely as possible)

<Grid>
    <utu:AutoLayout Spacing="16">
        <TextBlock Style="{StaticResource TitleSmall}"
                   Text="If you put ItemsSource after the extensions"
                   TextWrapping="Wrap" />
        <muxc:ItemsRepeater utu:ItemsRepeaterExtensions.SelectedItem="{Binding Test, Mode=TwoWay}"
                            utu:ItemsRepeaterExtensions.SelectionMode="SingleOrNone"
                            ItemsSource="{Binding Tests}">

            <muxc:ItemsRepeater.ItemTemplate>
                <DataTemplate>
                    <utu:Chip Background="{ThemeResource SurfaceBrush}"
                              Content="{Binding}"
                              Foreground="{ThemeResource OnSurfaceVariantBrush}"
                              HorizontalAlignment="Stretch"
                              BorderThickness="1"
                              Style="{StaticResource MaterialChipStyle}" />
                </DataTemplate>
            </muxc:ItemsRepeater.ItemTemplate>
        </muxc:ItemsRepeater>

        <TextBlock Style="{StaticResource TitleSmall}"
                   Text="If you put ItemsSource before the extensions"
                   TextWrapping="Wrap" />

        <muxc:ItemsRepeater ItemsSource="{Binding Tests}"
                            utu:ItemsRepeaterExtensions.SelectedItem="{Binding Test, Mode=TwoWay}"
                            utu:ItemsRepeaterExtensions.SelectionMode="SingleOrNone">

            <muxc:ItemsRepeater.ItemTemplate>
                <DataTemplate>
                    <utu:Chip Background="{ThemeResource SurfaceBrush}"
                              Content="{Binding}"
                              Foreground="{ThemeResource OnSurfaceVariantBrush}"
                              HorizontalAlignment="Stretch"
                              BorderThickness="1"
                              Style="{StaticResource MaterialChipStyle}" />
                </DataTemplate>
            </muxc:ItemsRepeater.ItemTemplate>
        </muxc:ItemsRepeater>
    </utu:AutoLayout>

</Grid>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        this.DataContext = this;
    }

    public int[] Tests { get; }  = { 1, 2, 3, 4 };

    public int Test { get; set; } = 2;
}

Nuget Package:

Package Version(s):

Affected platform(s): It happens on every platform I tested

• [X] WebAssembly
• [ ] Android
• [ ] iOS
• [ ] macOS (AppKit)
• [ ] Mac Catalyst
• [X] Skia
  • [ ] WPF
  • [ ] GTK (Linux)
  • [ ] Linux Framebuffer
  • [ ] Tizen
• [X] Windows

IDE:

• [X] Visual Studio 2022
• [ ] Visual Studio 2019
• [ ] Visual Studio Code
• [ ] Visual Studio for Mac
• [ ] Rider Windows
• [ ] Rider macOS

Relevant plugins:

Anything else we need to know?

This happens because the collection is still empty when the extensions tries to set the selected item.

[kazo0]

fyi @Xiaoy312