Pickers Inside CollectionView get SelectedItem Cleared on Scrolling

[LeoJHarris]

Description

Refer to the short gif below:

20241114_093914-ezgif.com-resize-video.mp4

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/LeoJHarris/CollectionView_Picker_SelectedValueCleared.git

Version with bug

9.0.0 GA

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 18

Did you find any workaround?

ListView with Retain Element set to True

Relevant log output

[ninachen03]

This issue has been verified using Visual Studio 17.13.0 Preview 1.0 (9.0.0-rc.2.24503.2 & 9.0.0). Can repro on iOS platform.

[kubaflo]

Hi, @LeoJHarris I see in your code that you don't have binding set on the SelectedItem property

<Picker
    Title="Select an item"
    Grid.Row="1"
    TextColor="Black">
    <Picker.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
            <x:String>Item 3</x:String>
        </x:Array>
    </Picker.ItemsSource>
</Picker>

Therefore the cell doesn't know how to restore to its previous state after it becomes visible again. Here's the code responsible for restoring cells:

Android:

maui/src/Controls/src/Core/Handlers/Items/Android/TemplatedItemViewHolder.cs

Lines 83 to 87 in 083ffa8

	if (!templateChanging)
	{
	// Same template, new data
	View.BindingContext = itemBindingContext;
	}

iOS:

maui/src/Controls/src/Core/Handlers/Items2/iOS/TemplatedCell2.cs

Lines 126 to 129 in 083ffa8

	if (PlatformHandler?.VirtualView is View view)
	{
	view.SetValueFromRenderer(BindableObject.BindingContextProperty, bindingContext);
	}

As you can see on these videos collection view behaves strangely when binding is not applied correctly:

Incorrect binding	Proper binding
Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2024-11-17.at.02.06.49.mp4	Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2024-11-17.at.02.02.55.mp4

This is an example of a viewModel that I've used

public class MainPageViewModel : BindableObject
{
    public class Item : BindableObject
    {
        private string _entryText;
        public string EntryText
        {
            get => _entryText;
            set
            {
                _entryText = value;
                OnPropertyChanged();
            }
        }

        private string _pickerSelection;
        public string PickerSelection
        {
            get => _pickerSelection;
            set
            {
                _pickerSelection = value;
                OnPropertyChanged();
            }
        }
    }

    private ObservableCollection<Item> _items = new ObservableCollection<Item>();
    public ObservableCollection<Item> Items
    {
        get => _items;
        set
        {
            _items = value;
            OnPropertyChanged();
        }
    }

    public MainPageViewModel()
    {
        Items = new ObservableCollection<Item>(Enumerable.Range(0, 20).Select(x => new Item()));
    }
}

Perhaps @rmarinho or @PureWeen can confirm if that's correct

[mattleibow]

@kubaflo thanks for the reply! Yes, you are correct. When scrolling the collection view, the cells are reused and if there is no binding then it will use whatever there was in there before.

@LeoJHarris is there a reason you are not binding? How are you planning on reading the data out of the controls?

[LeoJHarris]

Hi all, sorry I haven't found the time to get back to to this but I didn't think it mattered to not set the binding, I have another application where the binding is set and we still have the same issue. I will update sample with MVVM and setting bindings tomorrow and update if the problem persists.

[LeoJHarris]

Okay I've updated the sample project this time with pickers nested inside the CollectionView cell items using the proper bindings. Let me know if the setup is correct otherwise here is the end result.

[kubaflo]

@LeoJHarris okay, you're right. Actually it is not the iOS specific's bug. It happens on Android too, you just need to scroll more.

Screen.Recording.2024-11-20.at.01.45.53.mov

Basically it happens because you use a new itemsSource for each cell. So when a cell is reused, a new collection is being created and selected Index resets to its default value (-1) because of it.

I'm not sure if it is worth to overcomplicate the already overcomplicated picker's code to account for it. It is because I think it is not a likely situation that devs need a new itemsSource for each cell with picker.

In your case you can use either ListView or a stack view with bindable layout embedded inside a scroll view to fix it

Screen.Recording.2024-11-22.at.02.16.15.mov

However, if you really want to stick to collection view, I'd suggest creating one, common for all pickers, items source. Something like this for example:

<Picker
        Title="Select an item"
        Grid.Row="2"
        SelectedIndex="{Binding SelectedPickerIndex}"
        TextColor="Black">
        <Picker.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                        <x:String>Item 1</x:String>
                        <x:String>Item 2</x:String>
                        <x:String>Item 3</x:String>
                </x:Array>
        </Picker.ItemsSource>
</Picker>

@mattleibow @PureWeen what do you think? Should it be closed?

[LeoJHarris]

@kubaflo Thanks for following up, I understand that we can possibly could use a ListView although I do feel there was a reason why we opted for a CollectionView which may come back to me, but what I don't understand was this was working as expected in Xamarin, we had been doing the same thing with a CollectionView in an existing production application without issues using Xamarin and never noticed this issue.

I know things are getting a bit complicated but that's just a consequence of our requirements, each picker depending on the selected item determine the content that is being displayed in the cell itself. I've deliberately omitted this detail from the sample so the sample doesn't paint the complete picture of how and why we do it this way.

[mattleibow]

@kubaflo do you have that nice sample for android somewhere?

But I am also not sure I understand what you mean here. You said:

Basically it happens because you use a new itemsSource for each cell. So when a cell is reused, a new collection is being created and selected Index resets to its default value (-1) because of it.

As far as I can see, the whole structure is created at the start and then there are nested bindable objects. When swapping the BindingContext, it should not be resetting anything in the VM. So for the pickers, when you scroll the CV, the item is being set and when you swap the ItemsSource it should not be resetting the SelectedIndex.

You can image a world without any CV and you have some UI that has a picker. That picker is bound to VM1 with a source and selection. Both have some data. The you have VM2, with its own source and selection.

Changing the BC on the Picker should not update anything in either VM as it needs to wait for the BC to be finished setting. The code may now be seeing the source being reset, so it resets the selection, but maybe as part of that it should first make sure that the selection is preserved and then rather use that index instead of the -1.

I think this is a bug.

[mattleibow]

Actually, is it still breaking in .NET 9? I copied the sample and it works fine on Android and Windows. I don't have my mac set up at the moment, but maybe you can have a check?

MauiApp21.zip

[LeoJHarris]

@mattleibow I have tested on iOS with .NET 9 and the issue still remains, I will try android also

[bhuwancb99]

Is this issue fixed or still pending? because in latest version on iOS devices it's not working and picker items clear inside CollectionView when scroll the page.