[Bug] [Android] Editor: AutoSize does not work correctly if Editor is in a Grid Column

[acuntex]

Description

If the editor control with AutoSize="TextChanges" does not work correctly on Android if the Editor control is in a Grid Column. While typing the resize of the control happens too "late" in the text. Apparently it is the width of the second column. A condensed reproduction scenario has been created in the link below.

Steps to Reproduce

1. Create a Grid with multiple Columns (* and 40)
2. Put the Editor with AutoSize="TextChanges" in the first column.
3. Type more than a line.

Expected Behavior

The Editor control resizes when the text wraps in a new line.

Actual Behavior

The Editor control wraps the text but does not resize the control, only after more has been typed. (About the width of the second column)

Basic Information

• Version with issue: 4.8.0.1364
• Last known good version: Not known
• IDE: Visual Studio for Mac / Rider
• Platform Target Frameworks:
  • Android: 9
• Affected Devices: All Android devices.

Screenshots

Reproduction Link

https://github.com/acuntex/XamarinBug_EditorAutoSize

Workaround

https://github.com/xamarin/Xamarin.Forms/issues/11986#issuecomment-729815822

[solomonfried]

I may be having the same issue. I have a Grid showing images. When I have 5 or more columns, the images are not being sized to fit the columns properly. My code handles a SizeChanged on the images and once I have a Grid of 5 columns, the items in the grid have Zero width. When I switched from a 5 col/4 row to 4 col/ 5 row configuration, I was getting size changed events with negative values for Height.

I reverted to 4.8.0.1269 (Had to edit each project file and then run a Clean) and the Grid is now displaying correctly.

I see the same behavior on UWP and Android. (not tested on iOS)

[acuntex]

Just tried downgrading to 4.8.0.1269. At least the Editor Resize Bug also occurs in 4.8.0.1269.

[solomonfried]

After the downgrade, did you do a complete clean and re-build (I had to do that before the issue reverted)

I am trying to create a simple project that forces the issue I am having to occur. No luck so far. I am using other Grids in my app and they seem to be OK. It is in one instance that this issue occurs, so creating a working sample will be difficult.

[solomonfried]

Latest update. After downgrading and cleaning. I reinstalled the latest Xamarin package and rebuilt the app, and the problem I had before seems to be gone. May have been a version mismatch but I am just guessing.

[acuntex]

@solomonfried Yes, I did a complete clean and rebuild and the misbehavior did still occur in 4.8.0.1269

[hartez]

Oddly, I can't reproduce this on Android 9 - the resize happens as expected. But I can definitely see it happening if I run it on Android 8.1.

[acuntex]

@hartez I've noticed it on all tested platforms, Emulator Android 10, Samsung Android 9 and Huawei Android 10.

[rickclephas]

Wrapping the Editor inside a StackLayout like this provides the expected behaviour:

<Grid ...>
    ...
    <StackLayout Spacing="0">
        <Editor AutoSize="TextChanges"/>
    </StackLayout>
   ...
</Grid>

[chrisgull]

Thanks, rickclephas. This solves the simple case of an Editor inside a Grid.

A more complex case is of an Editor inside a Grid in an ItemTemplate for a ListView, with HasUnevenRows=true. In such situation the Editor resizes properly, but the row height is not adjusted at the same time. Clearly there are two issues here, albeit related.

[acuntex]

@rickclephas Wrapping the Editor in a StackLayout does not work in my case. It behaves differently though, if I put it in a StackLayout I see the first line instead of the second line until it resizes.

This bug is a big blocker for us, we can't go online because of it after 10 months of hard work! It is a basic control of Xamarin.Forms which is in Xamarin for years. Please fix it.

[rickclephas]

@acuntex there are a couple of issues with the Editor... checkout these other issues: #12062 and #5659

[acuntex]

@rickclephas Yep, I honestly don't understand it. Is no one using Xamarin.Forms in productive Apps that are a bigger than the usual example App?

I've dealt with bugs in React-Native before, but Xamarin.Forms has a lot of bugs you can't just workaround in basic components.

[acuntex]

So, since Microsoft has no intention to fix this, here is the simple workaround I found today:

Calculate and set the WidthRequest of the Editor and then the auto resize will work as intended.

If you have a dynamic size, try something like this and reference a parent container:

WidthRequest="{Binding Source={x:Reference ParentContainer}, Path=Width}"

Nice side effect: Even on iOS it seems to work better.

[chrisgull]

So, since Microsoft has no intention to fix this, here is the simple workaround I found today:

Calculate and set the WidthRequest of the Editor and then the auto resize will work as intended.

If you have a dynamic size, try something like this and reference a parent container:

WidthRequest="{Binding Source={x:Reference ParentContainer}, Path=Width}"

Nice side effect: Even on iOS it seems to work better.

Thanks, this is clever, I'll give it a try.

This bug is still open, so I wouldn't say there is no intention to fix this. In fact, I built my app in VS2019 16.8.1 and the problem seems to have been resolved. Could be related to .Net 5.0. I had other build problems so I had to go back to 16.7.7.

[GrullonD]

So, since Microsoft has no intention to fix this, here is the simple workaround I found today:

Calculate and set the WidthRequest of the Editor and then the auto resize will work as intended.

If you have a dynamic size, try something like this and reference a parent container:

WidthRequest="{Binding Source={x:Reference ParentContainer}, Path=Width}"

Nice side effect: Even on iOS it seems to work better.

For others coming from the almighty Google: As of July 9th, 2021, this is still the work around. Here it is, expanded further, in my use-case

                <StackLayout
                    x:Name="EditorContainer"
                    HorizontalOptions="FillAndExpand"
                    Spacing="0">
                    <Editor
                        AutoSize="TextChanges"
                        HorizontalOptions="FillAndExpand"
                        Placeholder="Enter your negative thought"
                        PlaceholderColor="{StaticResource TextColor}"
                        Text="{Binding ThoughtEntry.NegativeThought}"
                        VerticalOptions="Center"
                        WidthRequest="{Binding Source={x:Reference EditorContainer}, Path=Width}" />
                </StackLayout>

[chrisgull]

If you stick the Editor in a row of a ListView using ItemTemplate and a TemplateSelector then it still intermittently occurs on Android, but works fine on UWP and iOS. This is without using acuntex' fix above. My guess is layout is not reliably updated when a ListView template is recycled.