Keyboard Push Chat Upward and Hide the Messages

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>

6 Replies 1 reply marked as answer

CS Chandrasekar Sampathkumar Syncfusion Team March 19, 2021 10:37 AM UTC

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 



BH Ben Hotra March 19, 2021 02:11 PM UTC

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


CS Chandrasekar Sampathkumar Syncfusion Team March 22, 2021 12:07 PM UTC

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 



BH Ben Hotra March 22, 2021 04:07 PM UTC

Thank you so much. Looking forward to the sample.



KK Karthikraja Kalaimani Syncfusion Team March 23, 2021 04:44 AM UTC

Hi Ben,

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

Regards,
Karthik Raja 



CS Chandrasekar Sampathkumar Syncfusion Team March 24, 2021 11:30 AM UTC

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 


Marked as answer
Loader.
Up arrow icon