[BUG][iOS] Maui 8.0.10+ - CarouselView - Previous item content disappears after scrolling to next item

[RedZone908]

Description

In iOS, starting from Maui 8.0.10 and continuing in 8.0.14 and 8.0.20, when you scroll from one item in a CarouselView to the next item, and then go back to the previous item, that item will be blank. Items before the previous item will not be blank. Specifically the last item you were on before scrolling to some other item (in either direction) will end up blank when you return to it. When you loop through the end of the set, all items' content is properly restored.

https://github.com/dotnet/maui/assets/20206332/e01e274b-7086-4033-a722-d6b333f0254c

This does not happen in 8.0.3 and 8.0.7, and in Android it doesn't happen in any 8.0.x version so far.

Steps to Reproduce

1. Create a new MAUI app
2. Set up some images in your Resources/Images folder
3. Make a class with a string member for an image path, and make a list of that type on your view
4. Make a carousel view bound to the list
5. Debug the app
6. Scroll to the second item in the carousel
7. Scroll back to the first item and it will now be blank
8. Scroll back to the second item and it will also be blank now

Link to public reproduction project repository

https://github.com/RedZone908/Maui8_0_20_iOS_CarouselViewIssueRepro/tree/main

Version with bug

8.0.10 SR3, 8.0.14 SR3.1, 8.0.20 SR4

Is this a regression from previous behavior?

Yes, this used to work in .NET MAUI

Last version that worked well

8.0.7 SR2

Affected platforms

iOS

Affected platform versions

iOS 17+ (maybe earlier)

Did you find any workaround?

No response

Relevant log output

No response

[ninachen03]

Verified this issue with Visual Studio 17.10.0 Preview 4 (8.0.7 & 8.0.20).I can repro this issue

[BrandanN21]

I have noticed a small issue similar to this but on android, it only happens when I navigate backwards from a frame in the carousel view. Going from Frame 5 -> Frame 4 will cause portion of the carousel to render incorrectly. If I continue to swipe all the way back to frame 1 and go back to Frame 4 the view renders fine, again go to Frame 5 -> Frame 4 and I will see the issue again.

No issue when doing this on iOS.

[dfausz-ebsco]

Our MAUI app's main feature has a very prominent use of the CarouselView control and we ran into this issue in the process of converting our app from Xamarin to MAUI, so finding a solution or work around has been a high priority item for us.

I did some investigation and came up with one minimal example where the carousel worked perfectly. However, I then pulled down this repro repo and was able to replicate the issue. After comparing the two instances of the CarouselView I noticed that the example that worked did not use any data binding for the UI components while the repro example exclusively uses data binding for the image source.

This lead me to believe that it is specifically an issue with the BindingContext of the off-screen left item not getting set properly when the views are cycled. We were able to create a work around by overriding the OnBindingContextChanged method of the top level layout of the item template for our CarouselView, saving a cached instance of the previously set not-null model, and, within the same method if the BindingContext would be set to null, then instead set it to the cached model.

Also, I forked the repro example repo and added some text on top of the picture as a proof of concept.

Hope this helps!

Forked repo: https://github.com/dfausz-ebsco/Maui8_0_20_iOS_CarouselViewIssueRepro

[rmarinho]

Good catch @dfausz-ebsco seems it was with this change https://github.com/dotnet/maui/pull/14619

[PureWeen]

Unfortunately, the proposed PR needs a bit more review so this isn't going to make it for SR5

[Baraiboapex]

Does anyone have a work-around for this? I made a ticket for this issue as well not knowing this one existed. If this has in fact been fixed, what version should I upgrade to?

[kped1]

Does anyone have a work-around for this? I made a ticket for this issue as well not knowing this one existed. If this has in fact been fixed, what version should I upgrade to? @Baraiboapex it is fixed in 8.0.60, I have just tested in my app and it now works correctly.

[Baraiboapex]

@kped1

Yes, I can see that I'm working getting it into my app right now thanks.