search

xamarin / Xamarin.Forms

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

Editor inside a Scrollview scrolls out of reach at text click #2233

Open Mr-Pearce opened 6 years ago

Mr-Pearce commented 6 years ago

Bug report best practices: https://github.com/xamarin/Xamarin.Forms/wiki/Submitting-Issues

Description

This happens only iOS. (On Simulator toggle the software Keyboard ON) Android works fine.

If you put a Editor inside a ScrollView and click on the first line of Text, the first line scrolls up somewhere out of the reach/view and you have to scroll back down to see the Text.

Steps to Reproduce

  1. Create a Simple Xamarin.Forms App

  2. Add following code to the main Page.

  3. Build and click on The Text.

<ScrollView>
 <Editor  Text="Test "  VerticalOptions="Fill"/>
</ScrollView>

Expected Behavior

Like on Android. There it scrolls to the selected line of text. The selected Text is always above the keyboard but never out of view.

Actual Behavior

The selected Line scrolls up, out of the viewable space(screenshot 2), leaving an "empty" looking Editor. You have to scroll back to see the text. You can write text in but the input stays outside of the view until you scroll back

Basic Information

Screenshots

img_0108 2 img_0109 1

Reproduction Link

jassmith commented 6 years ago

the autoscroll behavior needs to be made much smarter...

theapphideaway commented 5 years ago

Have there been any updates on this? I have been fighting with this issue for a while.

ljezny commented 5 years ago

I'm facing the same issue in 3.4.0.1008975 Please fix it or provide any workaround. Our customer rejects to accept project upon this issue.

robinne commented 5 years ago

Ditto. Long/large editor area, when clicked into, will scroll all the way to the bottom. In this case, I have an editor inside of a scrollview. I don't think this would be accepted as a workable app. We need a way to scroll to where the cursor has been placed.

developer9969 commented 5 years ago

Hi is there any update on this one.Basically the editor is not usable at all in iOS. Cannot deliver functionality to client Thanks

gtruini commented 5 years ago

Any update on this bug? I don't think this behavior will be ok for my stakeholders.

maxbromo commented 5 years ago

Very annoying bug, but just in case it helps somebody: I've been able to work around it by following the general idea of https://stackoverflow.com/questions/51301671/xamarin-forms-scrollview-issue-with-editor-when-using-the-software-keyboard.

FIELDPOINT commented 5 years ago

Any updates? Still waiting.

Mr-Pearce commented 5 years ago

Any updates? Still waiting.

Is this still a thing with 4.2? I didn't put much attention into it but this bug is over a year old now.

theapphideaway commented 5 years ago

I havent heard anything, would love to get notified if this is fixed.

On Wed, Oct 16, 2019, 2:51 PM Mr-Pearce notifications@github.com wrote:

Any updates? Still waiting.

Is this still a thing with 4.2? I didn't put much attention into it but this bug is over a year old now.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/xamarin/Xamarin.Forms/issues/2233?email_source=notifications&email_token=AHZ3AQXLMJUTBFRBXCMVFPTQO5PE3A5CNFSM4EYUE4L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBNRSVY#issuecomment-542841175, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHZ3AQWIXHVFXG4R46CYPRLQO5PE3ANCNFSM4EYUE4LQ .

marcojak commented 5 years ago

This is very annoying. I'm having the same issue on iOS. I don't get how is possible that no one fixed it or at least had a look at it.

letscodewithkalyan commented 5 years ago

@samhouts @jassmith any updates on this. This issue exist in latest Library 4.1 also

samhouts commented 5 years ago

This is on the backlog. I don't currently have an estimate of when we may begin work on this item. Thank you for your patience!

lazmeister commented 4 years ago

I have similar issue in Android 9 only (does not happen in 6 or 7) where if you have an editor inside a scrollview and you have several lines of text, if you click on the 2nd or first line, it won't allow you to scroll back down to view the entire editor box as the keyboard is hiding it. In Android 6/7 it scrolls fine. It seems like there are several bugs in scrollview for the editor. @samhouts Any reason why this is an unresolved issue after 2 years? (Hope that was not harsh) and Thank you for all your efforts!

Android 9: image

Android 6/7: image

samhouts commented 4 years ago

@lazmeister Great question! I think this is just a tricky one that we haven't gotten right yet. We have other similar issues, too, like #10690. We'll try to prioritize this one. Thanks for your patience!

lazmeister commented 4 years ago

Thank you again @samhouts !

VIjayGunaraj commented 4 years ago

If we need an editor to be used inside a scroll view, you can have this solution.

`<ContentPage>
 `<ScrollView` >
                  <Grid VerticalOptions="FillAndExpand">
                              <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                               </Grid.RowDefinitions>

                   <Editor VerticalOptions="FillAndExpand"
                                                       AutoSize="TextChanges"
                              -----
                              Grid.Row="0" />
                     </Grid>
  `</ScrollView>`
</ContentPage>`
suihanhbr commented 4 years ago

Here is my solution:

 <ContentPage.Content>

        <StackLayout
            Orientation="Vertical">
            <ScrollView
                x:Name="scrollView"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">
                <Editor
                    Focused="editor_Focused"
                    VerticalOptions="FillAndExpand"
                    AutoSize="TextChanges"
                    TextColor="Gray"
                    x:Name="editor"
                    Margin="5,5,5,5" />
            </ScrollView>
        </StackLayout>
    </ContentPage.Content>

and add code :

void editor_Focused(System.Object sender, Xamarin.Forms.FocusEventArgs e) {
        if (DeviceInfo.Platform.Equals(DevicePlatform.iOS)) {
        scrollView.ScrollToAsync(scrollView.ScrollX, scrollView.ScrollY, true);
    }
}

It makes the ScrollView fix when user click the text.

Amenti commented 3 years ago

Here is my solution:

 <ContentPage.Content>

        <StackLayout
            Orientation="Vertical">
            <ScrollView
                x:Name="scrollView"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">
                <Editor
                    Focused="editor_Focused"
                    VerticalOptions="FillAndExpand"
                    AutoSize="TextChanges"
                    TextColor="Gray"
                    x:Name="editor"
                    Margin="5,5,5,5" />
            </ScrollView>
        </StackLayout>
    </ContentPage.Content>

and add code :

void editor_Focused(System.Object sender, Xamarin.Forms.FocusEventArgs e) {
        if (DeviceInfo.Platform.Equals(DevicePlatform.iOS)) {
      scrollView.ScrollToAsync(scrollView.ScrollX, scrollView.ScrollY, true);
  }
}

It makes the ScrollView fix when user click the text.

Nice idea. At least in our case it does only work occasionally though. Focussing different elements forth and back break this fix as well. I really hope the Xamarin Team gets to the root cause if this problem soon. We are getting a lot of bad customer feedback since iOS 14 because of this.

alextorres50 commented 2 years ago

Hello everyone

I had this problem and I solved it in the following way, I have a CustomEditor and the iOs custom renderer had it like this

CustomEditor

public class CustomEditor : Editor
    {
        public CustomEditor()
        {
        }
    }

Previous EditorRenderer

public class CustomEditorRenderer : EditorRenderer
    {
        public CustomEditorRenderer()
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Layer.CornerRadius = 10;
                Control.TextColor = UIColor.Black;

                Control.KeyboardDismissMode = UIScrollViewKeyboardDismissMode.OnDrag;

               NSNotificationCenter.DefaultCenter.AddObserver(this, new Selector("KeyBoardWillShow:"), new NSString("UIKeyboardWillShowNotification"), null);

              NSNotificationCenter.DefaultCenter.AddObserver(this, new Selector("KeyBoardWillHide:"), new NSString("UIKeyboardWillHideNotification"), null);

            }
        }

        [Export("KeyBoardWillShow:")]
        void KeyBoardWillShow(NSNotification note)
        {
            NSValue keyboardRect = (NSValue)note.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
            Control.ContentInset = new UIEdgeInsets(0, 0, keyboardRect.RectangleFValue.Size.Height, 0);
        }

        [Export("KeyBoardWillHide:")]
        void KeyBoardWillHide(NSNotification note)
        {
            Control.ContentInset = UIEdgeInsets.Zero;
        }
    }

I removed (comment) the lines where I assigned the observer and it was fixed

New EditorRenderer

public class CustomEditorRenderer : EditorRenderer
    {
        public CustomEditorRenderer()
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Layer.CornerRadius = 10;
                Control.TextColor = UIColor.Black;

                Control.KeyboardDismissMode = UIScrollViewKeyboardDismissMode.OnDrag;

               //NSNotificationCenter.DefaultCenter.AddObserver(this, new Selector("KeyBoardWillShow:"), new NSString("UIKeyboardWillShowNotification"), null);

               //NSNotificationCenter.DefaultCenter.AddObserver(this, new Selector("KeyBoardWillHide:"), new NSString("UIKeyboardWillHideNotification"), null);

            }
        }

        [Export("KeyBoardWillShow:")]
        void KeyBoardWillShow(NSNotification note)
        {
            NSValue keyboardRect = (NSValue)note.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
            Control.ContentInset = new UIEdgeInsets(0, 0, keyboardRect.RectangleFValue.Size.Height, 0);
        }

        [Export("KeyBoardWillHide:")]
        void KeyBoardWillHide(NSNotification note)
        {
            Control.ContentInset = UIEdgeInsets.Zero;
        }
    }

works both in editors inside or outside a scrollView, for some reason since ios 15, this is done automatically.

That solution test on Xamarin 5.0.0.2337, greetings to all

alextorres50 commented 2 years ago

I have similar issue in Android 9 only (does not happen in 6 or 7) where if you have an editor inside a scrollview and you have several lines of text, if you click on the 2nd or first line, it won't allow you to scroll back down to view the entire editor box as the keyboard is hiding it. In Android 6/7 it scrolls fine. It seems like there are several bugs in scrollview for the editor. @samhouts Any reason why this is an unresolved issue after 2 years? (Hope that was not harsh) and Thank you for all your efforts!

Android 9: image

Android 6/7: image

put your editor inside stacklayout:

 <StackLayout
                    x:Name="EditorContainer"
                    Grid.Row="0"
                    Grid.Column="0"
                    HorizontalOptions="FillAndExpand"
                    IsVisible="false"
                    Spacing="0">
                    <customviews:CustomEditor
                    x:Name="editorArea"

                    Margin="{OnPlatform Android='0,0,0,0',
                                        iOS='0,15,0,0'}"
                    VerticalOptions="FillAndExpand"
                    TextTransform="None"
                    IsTextPredictionEnabled="False"
                    IsSpellCheckEnabled="False"
                    HorizontalOptions="FillAndExpand"
                    AutoSize="Disabled" 
                    BackgroundColor="Transparent"
                    FontFamily="MediumFont"
                    TextColor="{StaticResource ColorTextGreen}"
                    FontSize="{OnPlatform Android=14,
                                          iOS=14}"
                    HeightRequest="180"
                    WidthRequest="{Binding Source={x:Reference EditorContainer}, Path=Width}"
                    IsVisible="false" />
                </StackLayout>