XamarinCommunityToolkit: [Bug] Expander within CollectionView does not work properly on iOS

Description

When using the XF expander view within the XF collection view the expanding action performs in irregular fashion. All the expenders below the current expander that has been tapped expand. The only expander that should expand is the one that has been tapped. This only occurs on iOS. Android works fine.

Steps to Reproduce

  1. Download the sample code provided in the re-production link.
  2. Run the sample on an iOS device or simulator.
  3. Tap on an expander within the collection.

Expected Behavior

Only the expander that has been tapped should expand.

Actual Behavior

Other expanders expand too.

Basic Information

  • Version with issue: XF 4.8.0.1687
  • Last known good version: N/A
  • Platform Target Frameworks:
    • iOS: 14.2

Environment

=== Visual Studio Community 2019 for Mac ===

Version 8.8.1 (build 37)
Installation UUID: c6ad9608-c31d-49fa-acff-5f1a74f47eef
	GTK+ 2.24.23 (Raleigh theme)
	Xamarin.Mac 6.18.0.23 (d16-6 / 088c73638)

	Package version: 612000093

=== Mono Framework MDK ===

Runtime:
	Mono 6.12.0.93 (2020-02/620cf538206) (64-bit)
	Package version: 612000093

=== Roslyn (Language Service) ===

3.8.0-5.20515.7+713efb0e68d34ab75faaf709e071e5c2d8d4ed0e

=== NuGet ===

Version: 5.8.0.6860

=== .NET Core SDK ===

SDK: /usr/local/share/dotnet/sdk/5.0.100/Sdks
SDK Versions:
	5.0.100
	3.1.403
	3.1.402
	3.1.401
	3.1.300
	3.1.200
	3.1.102
	3.1.100
MSBuild SDKs: /Applications/Visual Studio.app/Contents/Resources/lib/monodevelop/bin/MSBuild/Current/bin/Sdks

=== .NET Core Runtime ===

Runtime: /usr/local/share/dotnet/dotnet
Runtime Versions:
	5.0.0
	3.1.9
	3.1.8
	3.1.7
	3.1.4
	3.1.2
	3.1.0
	2.1.23
	2.1.22
	2.1.21
	2.1.18
	2.1.17
	2.1.16
	2.1.15
	2.1.14

=== .NET Core 3.1 SDK ===

SDK: 3.1.403

=== Xamarin.Profiler ===

Version: 1.6.13.11
Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler

=== Updater ===

Version: 11

=== Xamarin Designer ===

Version: 16.8.0.507
Hash: e87b24884
Branch: remotes/origin/d16-8
Build date: 2020-10-29 00:31:38 UTC

=== Apple Developer Tools ===

Xcode 12.2 (17535)
Build 12B45b

=== Xamarin.Mac ===

Xamarin.Mac not installed. Can't find /Library/Frameworks/Xamarin.Mac.framework/Versions/Current/Version.

=== Xamarin.iOS ===

Version: 14.6.0.15 (Visual Studio Community)
Hash: 87a1b18d8
Branch: d16-8
Build date: 2020-11-16 21:39:41-0500

=== Xamarin.Android ===

Version: 11.1.0.17 (Visual Studio Community)
Commit: xamarin-android/d16-8/c0e2b8e
Android SDK: /Users/sachin/Library/Developer/Xamarin/android-sdk-macosx
	Supported Android versions:
		8.1 (API level 27)

SDK Tools Version: 26.1.1
SDK Platform Tools Version: 30.0.5
SDK Build Tools Version: 29.0.2

Build Information: 
Mono: be2226b
Java.Interop: xamarin/java.interop/d16-8@79d9533
ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000
SQLite: xamarin/sqlite/3.32.1@1a3276b
Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc

=== Microsoft OpenJDK for Mobile ===

Java SDK: /Users/sachin/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_1.8.0.25
1.8.0-25
Android Designer EPL code available here:
https://github.com/xamarin/AndroidDesigner.EPL

=== Android SDK Manager ===

Version: 16.8.0.32
Hash: 01a7774
Branch: remotes/origin/d16-8
Build date: 2020-10-13 23:32:30 UTC

=== Android Device Manager ===

Version: 16.8.0.45
Hash: fc0af5f
Branch: remotes/origin/d16-8
Build date: 2020-10-13 23:32:54 UTC

=== Build Information ===

Release ID: 808010037
Git revision: acd8ddc086768c701bd641d6ec27316f45813175
Build date: 2020-11-17 12:49:41-05
Build branch: release-8.8
Xamarin extensions: acd8ddc086768c701bd641d6ec27316f45813175

=== Operating System ===

Mac OS X 10.16.0
Darwin 20.1.0 Darwin Kernel Version 20.1.0
    Sat Oct 31 00:07:11 PDT 2020
    root:xnu-7195.50.7~2/RELEASE_X86_64 x86_64

Build Logs

Screenshots

Reproduction Link

https://github.com/sachinkanadia/ExpanderSample

Workaround

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 21 (7 by maintainers)

Most upvoted comments

Hello, I can confirm that the problem occurs on emulators and physical devices. (iOS)

It seems to me that the problem here is how Expander is reused by CollectionView. Try to add a (Bindable property) “expanded” to your data model, and bind it to “IsExpanded” field with two way binding. Probably fields like height are also copied. So there is no problem with Expander control itself.

I personally got to it after changing the control to ListView and experimenting with element recycling modes.

As stated in previous comments, Expander works fine with Scroll + Stack. Here I give more specifics about how to apply that as a workaround, when not requiring CollectionView or ListView specific functionality. Change the container from

<CollectionView ItemsSource="{Binding MyItems}">
    <CollectionView.ItemTemplate>
        <!--Expander and possibly other content-->
    </CollectionView.ItemTemplate>
</CollectionView>

to

<ScrollView>
    <StackLayout Spacing="0" BindableLayout.ItemsSource="{Binding MyItems}">
        <BindableLayout.ItemTemplate>
            <!--Expander and possibly other content-->
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>

This workaround resolves all expand/collapse issues on iOS and Android for me in this scenario (and also on Xamarin Forms 5.0), including the expand+scroll or collapse+scroll issue where when under CollectionView expand/collapse of one item would incorrectly expand/collapse other items further down/up the list once or twice each screen’s worth of vertical space because of CollectionView cell reuse.