Keyboard Push Chat Upward and Hide the Messages

[Ben Hotra]

Hi, I am currently using SfChat 18.3.0.42. I am using my own editor instead of sfChat editor. When the keyboard is brought, all the messages are pushed up. If there are just a few messages, they are not seen when the keyboard is brought up. How can I adjust the SfChat component accordingly to make the messages stay in view? Place advice! Need this asap. Thank you.

<tabView:SfTabItem Title="Chat"
                   TitleFontColor="{StaticResource LighterTextGray}"
                   SelectionColor="{StaticResource LighterBlueColor}">
    <tabView:SfTabItem.Content>
        <Grid RowSpacing="0" 
              ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="1" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            Grid.RowDefinitions>
            
            <BoxView HeightRequest="1"
                     BackgroundColor="#CCCCCC"
                     VerticalOptions="End" />
            <sfChat:SfChat x:Name="ChatMessagesComponent"
                           Grid.Row="1"
                           Padding="0,5,0,0"
                           LoadMoreBehavior="{Binding LoadMoreBehavior}"
                           IsBusy="{Binding IsBusy}" 
                           BackgroundColor="{StaticResource MessageViewBackgroundColor}"
                           Messages="{Binding Messages}"
                           CurrentUser="{Binding CurrentUser}"
                           ShowMessageInputView="False"/>
            
            <StackLayout Grid.Row="2" 
                         Margin="0" 
                         Padding="0" 
                         BackgroundColor="White">
                
                <CollectionView x:Name="TaggableUserList"
                                IsVisible="{Binding IsSuggestionsTriggered}" 
                                ItemsSource="{Binding DisplayChatParticipants}"
                                SelectionMode="Single"
                                VerticalScrollBarVisibility="Always">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="userModels:User">
                            <StackLayout VerticalOptions="CenterAndExpand"
                                         Padding="5,0,0,0">
                                <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White">
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer
                                            Command="{Binding 
                                            Source={RelativeSource 
                                                AncestorType={x:Type platformChat:ChatMessagesPage}
                                            },
                                            Path=SuggestionTapped}"
                                            CommandParameter="{Binding .}"/>
                                    StackLayout.GestureRecognizers>
                                    <Label x:Name="PersonIcon"
                                           MinimumWidthRequest="30"
                                           HorizontalOptions="Start"
                                           VerticalOptions="Center"
                                           FontSize="30"
                                           Text="{x:Static utility:FontAwesomeIcons.CircledPersonIcon}"
                                           FontFamily="{StaticResource AppFontAwesomeSolid}" />
                                    <Label Text="{Binding PersonName}"
                                           FontFamily="{StaticResource AppBoldFontFamily}"
                                           VerticalOptions="CenterAndExpand"
                                           TextColor="Black"/>
                                StackLayout>
                            StackLayout>
                        DataTemplate>
                    CollectionView.ItemTemplate>
                CollectionView>
                
                <StackLayout Orientation="Horizontal" 
                             Padding="5"
                             BackgroundColor="#EFEFEF">
                    
                    <platformChat:CustomEntry 
                                  x:Name="MessageBody"
                                  HorizontalOptions="FillAndExpand" 
                                  HeightRequest="40" 
                                  Placeholder="Type a message, @name"
                                  KeepOpen="True"
                                  TextChanged="OnTyping"/>
                    
                    <Label Text="Send"
                           IsEnabled="{Binding IsSendButtonEnabled}"
                           TextColor="{StaticResource AppPrimaryColor}"
                           VerticalOptions="CenterAndExpand">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer
                                Command="{Binding 
                                        Source={RelativeSource AncestorType={x:Type platformChat:ChatMessagesPage}},
                                        Path=SendTapped}"/>
                        Label.GestureRecognizers>
                    Label>
                StackLayout>
            StackLayout>
        Grid>
    tabView:SfTabItem.Content>
tabView:SfTabItem>

[Chandrasekar Sampathkumar]

Hi Ben, 

Thank you for using Syncfusion products.                                 

We have checked the reported query “Keyboard Push Chat Upward and Hide the Messages” from our end. Could you please share the following details which would be helpful for us to check on it and provide you solution at the earliest, 

• Xamarin.Forms version used in your application
• CustomEntry custom control class codes
• Page or view SfTabView is loaded

Regards, 

Chandrasekar Sampathkumar 

[Ben Hotra]

Hi Chandrasekar,

Thank you for your help. I am currently using Xamarin form version 4.7.0.1351.

CustomEntryRenderer:

using UIKit;
using CoreGraphics;
using PlatformChat;
using PlatformChat.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace PlatformChat.iOS
{
    public class CustomEntryRenderer : EntryRenderer
    {
        /// <summary>
        /// Currently, inside this method we are hiding the 'Done' button on iOS by setting the InputAccessoryView to empty.
        /// </summary>
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            if (Control == null) return;
            
            Control.InputAccessoryView = new UIView(CGRect.Empty);
        }
        
        /// <summary>
        /// Currently, inside this method we are manipulating our chat keyboard by using property 'KeepOpen'
        /// </summary>
        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == VisualElement.IsFocusedProperty.PropertyName)
            {
                if (Control != null)
                {
                    var chatEntryView = Element as CustomEntry;
                    Control.ShouldEndEditing = textField =>
                    {
                        if (!string.IsNullOrEmpty(chatEntryView?.Text))
                        {
                            return !chatEntryView.KeepOpen;
                        }

                        return true;
                    };
                }
            } 
            else if (e.PropertyName == "CloseKeyboard")
            {
                if (Control != null)
                {
                    Control.ShouldEndEditing = testField => true;
                }
            }

            base.OnElementPropertyChanged(sender, e);
        }
    }
}

I have attached that SfTabView is loaded. Thank you. Looking forward to hearing from you.

Regards,

Ben

Attachment: ChatMessagesPage.xaml_26919b33.zip

[Chandrasekar Sampathkumar]

Hi Ben, 

Thank you for the update. 

We are currently preparing sample based on the code snippets provided and update your further details by two business days (March 24, 2021). We appreciate your patience until then. 

Regards, 

Chandrasekar Sampathkumar 

[Ben Hotra]

Thank you so much. Looking forward to the sample.

[Karthikraja Kalaimani]

Hi Ben,

We will update the further details by 24^th March 2021. We appreciate your patience until then.

Regards,
Karthik Raja 

[Chandrasekar Sampathkumar]

Hi Ben, 

Thank you for your patience. 

We have prepared simple shell application based on the code snippets provided. In iOS, CustomEntry is not displayed above the Keyboard, so we have made changes to show CustomEntry above Keyboard. We would like to let you know that we are not able to replicate the reported issue. We have attached the tested sample for your reference and you can download the same using the following link, 

Sample Link: Sample 

Could you please modify our sample and replicate the issue for us. 

Regards, 

Chandrasekar Sampathkumar