Skip to content

[iOS] Editor autoscrolls its text view completely off the screen if you press 'return' too many times, has no constraint against scrolling the text view off screen. Objects lag in resizing around it. #17757

Open

Description

Description

A working Editor is essential for text input in a cross platform and mobile environment. Editor can be used as a field for users to type into such as in this forum box I am typing into now or a WhatsApp or SMS style text entry field.

A typical such Editor function is described by:

            Editor editor = new();
            editor.AutoSize = EditorAutoSizeOption.TextChanges;
            editor.MaximumHeightRequest = 200;

In Windows and Android, Editor functions properly with such a setting. However in iOS it is quite broken, exhibiting at least three problems:

  1. Editor in iOS will not scroll down automatically as you add new lines once it is at its max size (in Windows and Android, as you add more lines, the Editor automatically scrolls down to show them).

  2. Editor in iOS does not respond to touch and drag to scroll manually (in Android, you can touch and drag to scroll and Windows use the mouse scroll wheel to scroll).

  3. Parent element of Editor in iOS resizes with a one frame lag behind the Editor as the Editor expands, so as you add new lines and Editor resizes, Editor will momentarily overlap its parent object each time (in Android and Windows the resizing of parents are instant).

Android and Windows exhibit all the obvious desirable behaviors.

That is: (i) A text field must automatically scroll down to always show the current line of text being written to, (ii) touching and dragging is the only way to manually scroll a text field in mobile and must work as expected, and (iii) resizing of the Editor should not introduce visual glitches and resize lags.

These problems only exist in iOS. Behavior of Editor in Android and Windows appears perfect.

Steps to Reproduce

  1. Create a new blank MAUI project in Visual Studio 2022 using .NET 7.0 by File > New.

  2. Copy and paste the following to replace the default class in App.xaml.cs:

public partial class App : Application {
    public App() {
        InitializeComponent();

        MainPage = new ContentPage();

        VerticalStackLayout vert = new();
        (MainPage as ContentPage).Content = vert;
        
        Border border = new();
        border.StrokeThickness = 4;
        border.BackgroundColor = Colors.DarkBlue;
        border.Stroke = Colors.Red;
        border.Padding = 10;
        vert.Children.Add(border);

        Editor editor = new();
        editor.BackgroundColor = Colors.White;
        editor.AutoSize = EditorAutoSizeOption.TextChanges;
        editor.MaximumHeightRequest = 200;
        border.Content = editor;

        Label testLabel = new Label();
        testLabel.Text = "Editor iOS Bug Demonstration:\n- Editor does not autoscroll downward as you fill the Editor with text (new lines past max height go down off screen)\n- Editor does not scroll with click and drag once past maxHeight in size.\n- There is a frame lag after resizing Editor and before resizing the parent so the Editor goes 'out of bounds' of its parent momentarily each time it grows vertically.";
        vert.Children.Add(testLabel);

    }
}
  1. Run the project in Windows and Android and you will observe the following CORRECT BEHAVIOR:
  • Editor will automatically scroll down to show the newly added text if you keep adding new lines once it is at max height.
  • Editor scrolls properly from mouse scroll wheel function over the object in Windows, touch to drag in Android, and mouse scroll wheel over object if in Windows Android simulator.
  • Editor as well as its parent Border will resize instantly in Windows and Android with no visible lag so the blue border around the Editor remains uniform at all times.
  1. Run the project in iOS and observe by contrast the following WRONG BEHAVIOR:
  • Editor will not scroll down automatically as you add new lines once it is at max height.
  • Editor does not respond at all to touch and drag to scroll manually.
  • Border around Editor resizes with a one frame lag behind the Editor, so as you add new lines and the Editor expands, the Editor will momentarily overlap the blue background of Border at the bottom each time.

Expected behavior again is that Editor in iOS should show the same results as Windows and Android with: (i) automatic downward scrolling on new lines, (ii) manual scrolling on touch and drag (and scroll wheel if available from simulator), and (iii) instant resizing of its parents upon changing size.

Link to public reproduction project repository

https://github.com/jonmdev/Editor-iOS-Bug

Version with bug

7.0.92/8.0

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS 16.7 on iPhone XR with Debug build (Hot Restart)

Did you find any workaround?

None.

Relevant log output

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

Labels

area-controls-editorEditorp/2Work that is important, but is currently not scheduled for releasepartner/cat 😻this is an issue that impacts one of our partners or a customer our advisory team is engaged withplatform/iOS 🍎s/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions