xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.63k stars 1.87k forks source link

[Bug] Editor with AutoSize="TextChanges" - text overflows control without it scrolling, forcing one to type blind #12704

Open Tommigun1980 opened 3 years ago

Tommigun1980 commented 3 years ago

Hi!

If you have an editor with AutoSize="TextChanges" and keep on writing inside it, you'll eventually come to a point where the editor can't grow any taller. If you keep writing inside the editor the contents don't scroll (and can't even be manually scrolled) so you will be typing blind after a while. This is worse on small devices such as an iPhone SE.

Please see this video of the issue: https://drive.google.com/file/d/1YNpn5Ef7zw1fl17pDExr8lCR1lTGv5mN/view?usp=sharing

Expected: The text should auto scroll when the caret goes beyond the editor's borders, to always keep it visible. Currently the editor can't be scrolled even manually.

rmarinho commented 3 years ago

Did you tried to add a scrollview around the Editor?

Does ti behave like that on iOS and Android ?

Tommigun1980 commented 3 years ago

Did you tried to add a scrollview around the Editor?

Does ti behave like that on iOS and Android ?

Hi. The editor itself provides a scrollbar so I don't think it's possible to wrap it inside (another) scroll view.

Looking at a messaging app like Facebook Messenger, they cap the rows at 6, after which point it won't grow anymore, and the caret gets kept visible when entering more lines after that. If there was an ability to set max lines I think the other visualisation problem would not appear as it wouldn't try to grow outside its boundaries.

A max lines feature is available in for example Labels, and is of course different than setting a max height in pixels as it automatically caps it in correct places independently of accessibility features like large fonts etc. So I think that the problem here could be largely avoided if the editor couldn't grow infinitely.

jsuarezruiz commented 3 years ago

Could be related with https://github.com/xamarin/Xamarin.Forms/issues/10406 and https://github.com/xamarin/Xamarin.Forms/issues/10417

Tommigun1980 commented 3 years ago

Hi @jsuarezruiz.

I don't think it's https://github.com/xamarin/Xamarin.Forms/issues/10406 as I think I ran into it but was able to resolve it (it was an error on my part with an implicit style affecting the editor's sizing).

I don't think it's https://github.com/xamarin/Xamarin.Forms/issues/10417 either as the editor seems to size properly with or without new line characters.

I also don't think there's necessarily anything wrong with how the editor calculates its size on a technical level. The problem is rather that it will at some point outgrow the screen's height as the user keeps typing into it, and there's no way to limit how much it can grow. When it outgrows the screen's height the layout will evidently 'blow up', forcing the user to type blindly, as the editor can be hundreds of lines tall when say ten would fit on screen.

So I think an "easy" fix would be to add some limit to how much it can grow, for example a MaxLines property (which already exists in for example the Label control). Just make sure that when it stops growing and the user keeps typing to always keep the caret visible, in case you decide to go this route.

Thank you.

giuseppenovielli commented 3 years ago

@Tommigun1980 I create this simple custom control to limit editor's height. Enjoy! :)

public class CustomEditorMaxHeight : Editor
    {
        public double MaxHeightEditor { get; }

        public CustomEditorMaxHeight()
        {

//Set MaxHeight you want
            MaxHeightEditor = Application.Current.MainPage.Height / 5;

            AutoSize = EditorAutoSizeOption.TextChanges;

        }

        protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
        {
            var sizeRequest = base.OnMeasure(widthConstraint, heightConstraint);

            var newHeight = sizeRequest.Request.Height;

            if (newHeight > MaxHeightEditor)
                newHeight = MaxHeightEditor;

            return new SizeRequest(new Size(sizeRequest.Request.Width, newHeight));
        }

    }