When the keyboard appears and the chat area goes up. Text does not appear in the ChatEntry input box. Only on close

[Guittier]

Hello,

 

I have a problem when the keyboard pops up and the ChatEntry input box pops up with the keyboard. The text does not appear in it.

On the other hand, when the tablet keyboard is closed, the text entered before is displayed correctly in the area.

This is a display bug that I reproduced with your example of ConvertionalUI. Do you have a solution, I'm looking in vain?

 

Thank you

 

PS : See the screenshots to show the problem.

[Didi]

I have tested the scenario and I cannot reproduce the issue with the chat keyboard. 

Provide more details: 
- versions and display resolutions of Android device/simulator where the issue can be reproduced.
- page's definition where the chat is defined
- video of the behavior
- whether the issue occurs on device rotation, etc.? 

 

[Guittier]

- I use in a grid

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="http://prismlibrary.com" xmlns:views="clr-namespace:VendeeFacadeApp.Views" 
             xmlns:telerikConversationalUI="clr-namespace:Telerik.XamarinForms.ConversationalUI;assembly=Telerik.XamarinForms.ConversationalUI" 
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives" 
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input" 
             xmlns:telerikCommon="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="VendeeFacadeApp.Views.Chat"
             NavigationPage.HasNavigationBar="False">
    <ContentPage.Content>
        <Grid BackgroundColor="{DynamicResource grisClair}">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="60"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!--Menu du haut-->
            <views:Menu Grid.Row="0"/>

            <!--Fil d'arianne-->
            <telerikInput:RadButton Text="Accueil > Mon chantier > Ma messagerie" Grid.Row="1" Margin="20,20,300,0" Command="{Binding RetourCommand}" Style="{StaticResource btnFilAriane}"/>

            <Label Text="{Binding ErrorMessage}" Style="{StaticResource labelErreur}" Grid.Row="2"/>

            <telerikPrimitives:RadBusyIndicator Grid.Row="3" AnimationContentColor="Black" AnimationContentHeightRequest="50" AnimationContentWidthRequest="50" AnimationType="Animation3" IsBusy="{Binding IsChargementLst, Converter={StaticResource boolToggleConverter}}"/>

            <telerikConversationalUI:RadChat Grid.Row="3" IsVisible="{Binding IsChargementLst}" AutoScrollMode="Never"
                             Author="{Binding Me}"
                             ItemConverter="{StaticResource SimpleChatItemConverter}"
                             ItemsSource="{Binding ChatLst}"
                             Message="{Binding Message}"
                             ItemTemplateSelector="{StaticResource CustomChatItemTemplateSelector}"
                             SendMessageCommand="{Binding NouveauMessageCommand}">
                <telerikConversationalUI:RadChat.ControlTemplate>
                    <ControlTemplate>
                        <RefreshView IsRefreshing="{Binding IsRefreshing}" Command="{Binding RefreshCommand}">
                            <ScrollView>
                                <Grid telerikInput:KeyboardHelper.IsTranslationTarget="True" RowSpacing="2">
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition Height="Auto" />
                                        <RowDefinition Height="Auto" />
                                    </Grid.RowDefinitions>
                                    <telerikConversationalUI:ChatListView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                                  AutoScrollMode="{TemplateBinding AutoScrollMode}"
                                                  ScrollMediator="{TemplateBinding ActualScrollMediator}"
                                                  ItemTemplate="{TemplateBinding ItemTemplateSelector}" 
                                                  ItemsSource="{TemplateBinding Items}"
                                                  AutomationProperties.Name="ChatListView" />
                                    <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                          Grid.Row="1"
                                          Content="{TemplateBinding TypingIndicator}" />
                                    <telerikCommon:RadContentView telerikCommon:StyleManager.InheritedStyleClass="{TemplateBinding ActualStyleClass}"
                                          x:Name="PickerContainer"
                                          VerticalOptions="End"
                                          Content="{TemplateBinding Picker}" />
                                    <Grid x:Name="PART_InputAreaGrid"
                  Grid.Row="2"
                  Padding="5, 0, 0, 0" 
                  telerikInput:KeyboardHelper.IsTranslationPivot="True">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50" />
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>

                                        <telerikInput:RadButton ImageSource="picture.png" Command="{Binding PhotoCommand}" Grid.Column="0" Padding="10" BackgroundColor="{DynamicResource blanc}"/>

                                        <telerikConversationalUI:ChatEntry
                    Text="{TemplateBinding Message, Mode=TwoWay}"
                    BackgroundColor="Transparent"  WatermarkText="Saisissez un message"
                    VerticalOptions="Center"
                    CompletedCommand="{TemplateBinding ActualSendMessageCommand}"
                    FocusMediator="{TemplateBinding FocusMediator}"
                    telerikInput:KeyboardHelper.IsTranslationSource="True" Grid.Column="1"/>

                                        <telerikInput:RadButton x:Name="PART_SendMessageButton"
                                        Grid.Column="2"
                                        Margin="0,0,10,0"
                                        BackgroundColor="Transparent"
                                        Command="{TemplateBinding ActualSendMessageCommand}"
                                        WidthRequest="30"
                                        HeightRequest="30"
                                        VerticalOptions="Center" />
                                    </Grid>
                                </Grid>
                            </ScrollView>
                        </RefreshView>
                    </ControlTemplate>
                </telerikConversationalUI:RadChat.ControlTemplate>
            </telerikConversationalUI:RadChat>
        </Grid>
    </ContentPage.Content>
</ContentPage>

- No device rotation, in portrait no landscape mode

- Bug on emulator or real device on Android versions 9.

The real device used is https://www.crosscall.com/en_FR/core-t4-COT4.TAB.OPM.html

- bug video here -> https://drive.google.com/file/d/1B5Uhq2Z_ZsfXeTuNjHvvAN3Vy5At5MTb/view?usp=sharing

[Didi]

Hi Guittier,

Thank you for the provided details.

I have noticed that RefreshView and ScrollView are set inside the Chat Control Template. The issue may occur because of the usage of ScrollView. Note that the chat has its internal scrolling mechanism, so please avoid the usage of additional ScrollView. 

The default chat control template does not have a ScrollView.

Remove the ScrollView from your code and let me know whether this will solve the issue. 

If removing the ScrollView does not solve the issue, please open a support ticket and attach a sample runnable project (with the exact setup you have) to it. In this way I can research the case further. 

[Guittier]

I removed the scrollview and refreshview it doesn't change anything. I noticed that I have the problem on another RadPassword input field. So the problem is probably somewhere else. In fact, as soon as the control is too low on the screen and must rise when the keyboard appears, the bug occurs. Whereas if the field is already above the keyboard it works. I will see to create a ticket tomorrow thank you.

[Didi]

Yes, please open a support ticket and attach a sample project to it. 
I have tried to reproduce the issue on my side, but there are missing resources, templates, etc. so, I will need the complete setup. You can also attach the video to the ticket, with exact steps to reproduce the issue. 

[Guittier]

I found.. I had to disable hardware acceleration in the android manifest to read some pdf. You just had to activate the HARDWARE ACCELERATION

Thanks for your help and sorry

 

 

[Didi]

Hi Guittier,

I have set this inside the Androidmanifest.xml file:

    <application android:label="DataFormEditors.Android" android:theme="@style/MainTheme" android:hardwareAccelerated="true"></application>

and same, the keyboard is displayed as expected and does not overlap the input field - screenshot attached. I have tested on Android 12 Pixel 5 emulator API level 31. Could you please test on different android api levels and check whether the beahvior is the same? 

I will need a sample repro project to test the scenario you have. So please open a support ticket and attach the project to it.