[Android] CollectionView + HeightRequest + Editor dynamic sizing is broken

BruceHaley commented 6 months ago

Description

When a CollectionView has a HeightRequest property setting and its DataTemplate contains an Editor control, and when there are enough different-sized listed items to more than fill the page, displayed item sizes are randomly wrong.

I have created a repro in code using Microsoft's dotnet maui-samples.

Repro # 1:

Clone my modified maui-samples repo here: https://github.com/BruceHaley/maui-samples/tree/main
Build the CollectionViewDemos project.
Run it on an Android device.
Pick the menu item, "Scroll mode when adding items". Wait for the list to finish populating.
Now scroll the list up and down a few times.

Expected:

Listed items would all remain properly sized according to the amount of text in each.

Actual:

Some items are redisplayed the wrong size, leaving gaps at the bottom of the text. Each time you scroll, they come out sized differently, apparently randomly.

Repro # 2:

You can code your own repro from the dotnet maui-samples by pasting the following code snippet into the file ItemsUpdatingScrollModePage.xaml:

        <CollectionView x:Name="collectionView"
                        HeightRequest="500"
                        ItemsSource="{Binding Monkeys}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                        <Editor
                            Text="{Binding Details}"
                            Margin="5"
                            TextColor="LightGray"
                            BackgroundColor="DarkRed"
                            FontAttributes="Bold" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

After pasting, follow the directions for Repro # 1.

Notes:

This bug may exist on other devices. I only tested this on Android.
The key to the problem appears to be specifying both HeightRequest and Editor at the same time. See the code snippet. If you either delete the HeightRequest line, or you change Editor to Label, the problem goes away.

Link to public reproduction project repository

https://github.com/BruceHaley/maui-samples/tree/main

Version with bug

8.0.21 SR4.1

Is this a regression from previous behavior?

Unknown. Did not test other versions

Last version that worked well

Unknown

Affected platforms

Android, maybe others.

Affected platform versions

Android 12

Did you find any workaround?

No.

github-actions[bot] commented 6 months ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

MAUI Collection view is nor resize properly on iOS (#21271), similarity score: 0.78
[iOS] CollectionView item sizing wrong after refresh (#20443), similarity score: 0.78
[iOS/Mac] CollectionView does not respect ItemSource DataTemplate height/width constraints (#17285), similarity score: 0.78

Closed similar issues:

CollectionView sets the wrong height for items containing long word-wrapped text inside a * column (#17050), similarity score: 0.80
CollectionView not sized correctly on iOS (#11070), similarity score: 0.79

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

ninachen03 commented 6 months ago

Verified this issue with Visual Studio 17.11.0 Preview 1.0 (8.0.40 & 8.0.21& & 8.0.3). Can repro it.

BruceHaley commented 6 months ago

I found a workaround for this problem: Add the property AutoSize="TextChanges" to the Editor control, as in:

      <Editor 
          Text="{Binding Details}"
          TextColor="LightGray"
          FontAttributes="Bold"
          AutoSize="TextChanges"
          VerticalOptions="CenterAndExpand" />

With that change, there are no more sizing errors. Would be good if this were documented somewhere, like maybe here. Thanks.

dotnet / maui