Maui icon indicating copy to clipboard operation
Maui copied to clipboard

[BUG] TouchBehaviour in CollectionView2 stops working after Push/Pop of page

Open beeradmoore opened this issue 6 months ago • 3 comments

Is there an existing issue for this?

  • [x] I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

  • [x] I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

User can tap row to go to new page, navigate back and tap on new row.

Expected Behavior

User can tap row to go to new page, navigate back and now most of the rows no longer work.

Steps To Reproduce

  1. Open and run the solution on iOS (tested in simulator)
  2. Click "ShortList Item 1", "ShortList Item 2", "ShortList Item 3" to see how navigation should work.
  3. Tap "Toggle Short/Long List" button to change to change to swap the list source to another list (in our production app, this is training events on different months so the list will grow/shrink)
  4. Tap "LongList Item 1", "LongList Item 2", "LongList Item 3", "LongList Item 4", "LongList Item 5" and view animation of row tapped and if a page is pushed or not
  5. At first glance three of these work (maybe related to there being three "ShortList Item"?)
  6. After tapping to try use all of them a second time it appears now only two work.
  7. Continuing to tap you will see console output, this is provided by the custom GridTestBehavior that is in the project, indicating that behviors themselves are not broken, just TouchBehavior.

Link to public reproduction project repository

https://github.com/beeradmoore/maui-issue-CollectionViewTouchEffect

Environment

- .NET MAUI CommunityToolkit: 12.0
- OS: macOS 15.5, tested on iOS Simulator 18.4
- .NET MAUI: 9.0.80

Anything else?

The issue still exists rolling back to CommunityToolkit.Maui v11.2.

This project is using CollectionViewHandler2 (see here). If we use use the out of the box CollectionView the issue does not occur. I believe this is a CommunityToolkit.Maui issue though as it impacts TouchBehavior but not all other behaviors.

Issue does not impact Android (because CollectionViewHandler2 is not used there I guess).

These rows also have GridTestBehavior added. It simply adds a TapGestureRecognizer and will output the label of the row tapped. When you tap on a row while it is in its "broken" state this other behavior will continue to fire, further leading me to believe the issue is in TouchBehavior itself.

It does not matter if the page is Push/Pop or PushModal/PopModal. See RowClicked in MainPageModel.cs and GoBackAsync in OtherPageModel.cs to easily change this behavior between the two. However if you never Push to the next page the issue does not happen. At one point I was using ObservableCollection and I would clear/add new rows to test row recycling. Adding a total of 1000 new items over 100 list reloads the issue did not appear if we never navigated to the new page and back (eg. Disable the push so you can still view the animation).

Using CollectionViews SelectedItem is not an option as we want multiple places on the row the user can tap. Using raw TapGestureRecognizer instead of TouchBehavior works, but we are using TouchBehavior due to getting touch indicators.

(Repo and project is also mis-labeled TouchEffect, because I am migrating code from XF with TouchEffect to MAUI with TouchBehavior and I wrote it wrong. It has been a week...)

beeradmoore avatar Jun 27 '25 04:06 beeradmoore

If I build this from source and put a breakpoint in TouchBehaviors OnAttachedTo I could it firing three times on app launch. When I change the long list it only fires two times. Checking the VisualElement bindable I can see this is "LongList Item 4" and "LongList Item 5", I assume the other cells are recycled and not re-added. I think we are all good so far with what we should expect to see.

If I tap on one I see OnDetachedFrom fire five times. Again, so far so good. When I navigate back from the next page I only see OnAttachedTo twice, "LongList Item 4" and "LongList Item 5". This is why touching on the first three no longer work.

When we navigate away the OnDetachingFrom is firing for TouchBehavior but not my own `GridTestBehavior. Is there something in this project that monitors to add/remove behaviours on navigate and it is what is wrong, or is that within MAUI itself?

EDIT: Without using CollectionView2 I see the last OnAttachedTo fire five times instead of twice which is why it works. So maybe this is a MAUI issue?

beeradmoore avatar Jun 27 '25 05:06 beeradmoore

I had similar issues with DataTemplate items inside CollectionView, when touch did not work. I had to programitacally delete and create new DataTemplate (simple button) and attach event handler to make it work. Do not know if this is the case for you, just a hint if it helps you.

Also, TapGesture overrides .clicked handler on Android, while on iOs .clicked handler does not work and you have to use .clicked. So using .clicked (works for iOs) and .TapGesture (works for Android). More info.

ghost avatar Jun 27 '25 05:06 ghost

Funny you should say that. Originally I had TapGesture on the first element of the row and then TouchBehavior on a box that takes up 90% of the cell. Idea being there is an icon in that last 10% I don't want impacted by the animation. I hadn't noticed the system was failing after navigating. But I did notice one of the platforms (forget if it was iOS or Android) was animating fine but not going to the next page. The TouchBehavior was eating up the event and TapGesture was not activating.

beeradmoore avatar Jun 28 '25 01:06 beeradmoore