[Bug][iOS] Keyboard hides CollectionView elements

[lobbo232]

Description

When the keyboard opens it covers any elements at the end of a CollectionView. This means if you have Entrys or Editors in a CollectionView you can not see what you are typing when at the end of the CollectionView.

Steps to Reproduce

1. Create a new Xamarin.Forms project
2. Add a CollectionView to the MainPage content
3. Set the ItemsSource to a collection of items
4. Add a DataTemplate containing an Editor or Entry
5. Run the app, scroll to the end and try typing in the final item. The keyboard will open and cover the input.

Expected Behavior

The CollectionView should scroll up to show where you are typing (as it does on Android).

Actual Behavior

The keyboard covers the input on the CollectionView so you can not see what you are typing.

Basic Information

• Version with issue: at least 4.3.0.908675 and later
• Last known good version: Unknown
• IDE: Visual Studio 2019
• Platform Target Frameworks:
  • iOS: 13.10.0.17
  • Android: 10.1.3.7
• Android Support Library Version:
• Nuget Packages:
• Affected Devices: iOS

Screenshots

Reproduction Link

Test Keyboard hiding collection view.zip

Workaround

You can put the CollectionView in a ScrollView, however it wont auto-scroll up to focus the input. When the keyboard opens and you have to scroll up manually. I am unsure of any adverse effects of having nested scroll controls.

[jsuarezruiz]

Could be the same as #9706

[FIELDPOINT]

Any chance of this getting prioritized? We are receiving lots of complaints from our customers for this exact same problem.

[lobbo232]

Any chance of this getting prioritized? We are receiving lots of complaints from our customers for this exact same problem.

Last time I spoke to Xamarin support they suggested it was best to change to a ListView instead for live environments to give the CollectionView a little more time in the oven!

[lafritay]

@lobbo232 Did you ever figure out a workaround for this?

[lelebs]

Hello, i was struggling with this issue and putting the CollectionView in a ScrollView gave me a few different problems within the layout, and changing it back to ListView wasn't viable either(#2383).
I was able to fix it using this plugin that was made for Xamarin.Forms 2.0 (https://github.com/lelebs/Xamarin.Forms.Plugins/tree/master/KeyboardOverlap) I downloaded the project, upgraded it to Xamarin.Forms 5, and used in my iOS app. It worked like a charm.

[Mertsch]

@lelebs Will you share the changes you have made in your fork with us? So far it only contains the original code.

[lelebs]

@Mertsch I commited the changes on the fork.
I imported the forked code in my solution as another iOS project, added as a reference into my main iOS application and added KeyboardOverlapRenderer.Init(); after the Xamarin.Forms.Init(); in my AppDelegate.cs, as the original repository suggested.

[ederjbezerra]

@lelebs simulate this: add a CollectionView which FillAndExpands and below it, an Entry with height value of 50. And configure the Send keyboard button to add an element to this CollectionView, like a chat. In my case the CollectionView is moving up at the screen and at certain point it's kicked from the screen and I couldn't see it anymore. Only having everything inside ScrollView solved the problem.

[vincentcastagna]

The issue is also happening when using listview with a footer template ... the iOS keyboard hides everything. I also forked the iOS package that @lelebs mentionned, but its not working ... Still having trouble on iOS 14/ iphone 12

[vincentcastagna]

So, basically we workarounded this by implementing a custom renderer such as what have been done in the KeyboardOverlap library (which did not work for me, and not necessary given the fact a simple 80 lines renderer will work).

public class KeyboardViewRenderer : ViewRenderer
    {
        NSObject _keyboardShowObserver;
        NSObject _keyboardHideObserver;
        protected override void OnElementChanged(ElementChangedEventArgs<View> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                RegisterForKeyboardNotifications();
            }

            if (e.OldElement != null)
            {
                UnregisterForKeyboardNotifications();
            }
        }

        void RegisterForKeyboardNotifications()
        {
            if (_keyboardShowObserver == null)
                _keyboardShowObserver = UIKeyboard.Notifications.ObserveWillShow(OnKeyboardShow);
            if (_keyboardHideObserver == null)
                _keyboardHideObserver = UIKeyboard.Notifications.ObserveWillHide(OnKeyboardHide);
        }

        void OnKeyboardShow(object sender, UIKeyboardEventArgs args)
        {

            NSValue result = (NSValue)args.Notification.UserInfo.ObjectForKey(new NSString(UIKeyboard.FrameEndUserInfoKey));
            CGSize keyboardSize = result.RectangleFValue.Size;
            if (Element != null)
            {
                Element.Margin = new Thickness(0, 0, 0, keyboardSize.Height); //push the entry up to keyboard height when keyboard is activated

            }
        }

        void OnKeyboardHide(object sender, UIKeyboardEventArgs args)
        {
            if (Element != null)
            {
                Element.Margin = new Thickness(0); //set the margins to zero when keyboard is dismissed
            }

        }


        void UnregisterForKeyboardNotifications()
        {
            if (_keyboardShowObserver != null)
            {
                _keyboardShowObserver.Dispose();
                _keyboardShowObserver = null;
            }

            if (_keyboardHideObserver != null)
            {
                _keyboardHideObserver.Dispose();
                _keyboardHideObserver = null;
            }
        }
    }

public class KeyboardView : Grid
    {
    }

Then use KeyboardView to wrap your entry in xaml. Note that this WON'T work if you use the FooterTemplate of the CollectionView. You need to play with a grid overlay ...