How to keep an editor stay in focus both on iOS and Android?

Druffl3Druffl3 Member ✭✭
edited July 5 in Xamarin.Forms
For now, I am Playing with Focus and UnFocus, but it's very botchy on Android and adds white spaces that don't get cleared in iOS . Can anybody help me with a solution please?

Answers

  • JohnHardmanJohnHardman GBUniversity mod

    @Druffl3 said:
    For now, I am Playing with Focus and UnFocus, but it's very botchy on Android and adds white spaces that don't get cleared in iOS . Can anybody help me with a solution please?

    Post your code. Many of us use focus and unfocus without issue, so it's likely to be something in your code.

    Also, what version of XF are you using, and are you testing on physical devices or emulators (emulators don't always do what you would expect)?

  • Druffl3Druffl3 Member ✭✭

    Hi @JohnHardman , the current version of my Xamarin.Forms is 3.4.0.1029999, I followed Xamboy's chat UI article , to develop a chat application. Unfortunately, I am not able to add a link to my comment yet.

    I am basically, calling Focus, everytime the send button is tapped, to have the keyboard always appear.

    public void Handle_Completed(object sender, EventArgs e)
    {
    (this.Parent.Parent.BindingContext as GroupChatViewModel).OnSendCommand.Execute(null);
    chatTextInput.Focus();
    }

    chatTextInput is the x:Name of my editor.

  • JohnHardmanJohnHardman GBUniversity mod

    @Druffl3

    @JohnHardman said:
    Also, what version of XF are you using, and are you testing on physical devices or emulators (emulators don't always do what you would expect)?

    There is nothing in the short snippet of code that you posted that would cause what you have described. Are you seeing the problem on physical devices? Do you have any custom renderers, Effects or Behaviors associated with the Editor? If so, post their code. If not, post the code of the page and the GroupChatViewModel.

  • Druffl3Druffl3 Member ✭✭
    edited July 8

    This is my Chat Text Field:

    <ContentView x:Class="iSmart.Core.Views.Partials.ChatInputBarView"
                 xmlns:controls="clr-namespace:iSmart.Core.Controls">
        <ContentView.Resources>
            <ResourceDictionary Source="/Styles/Styles.xaml" />
            <ResourceDictionary Source="/Styles/Colors.xaml" />
        </ContentView.Resources>
        <Grid RowSpacing="0" 
               ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <controls:ExtendedEditorControl x:Name="chatTextInput" 
                     Text="{Binding TextToSend}" 
                     Margin="10,1,1,1"  
                     TextColor="White" 
                     Keyboard="Chat"
                     IsExpandable="true"
                     FontSize="14"
                     FontFamily="{StaticResource IntelRegularFont}"
                     HorizontalOptions="FillAndExpand" 
                     PlaceholderColor="White"
                     Placeholder="Type your message here"
                     Grid.Row="0" 
                     Grid.Column="0" BackgroundColor="Transparent" />
            <StackLayout Grid.Row="0"
                    Grid.Column="1">
                <Button Image="sendMsg_icon"
                    BackgroundColor="White"
                    MinimumHeightRequest="50"
                    MinimumWidthRequest="50"
                    HeightRequest="50"
                    WidthRequest="50"
                    CornerRadius="25"
                    Command="{Binding OnSendCommand}"/>
            </StackLayout>
        </Grid>
    </ContentView>
    

    Code behind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    using Xamarin.Forms.Xaml;
    using iSmart.Core.ViewModels;

    namespace iSmart.Core.Views.Partials
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class ChatInputBarView : ContentView
        {
            public ChatInputBarView ()
            {
                InitializeComponent ();
                if (Device.RuntimePlatform == Device.iOS)
                {
                    this.SetBinding(HeightRequestProperty, new Binding("Height", BindingMode.OneWay, null, null, null, chatTextInput));
                }
            }
            public void Handle_Completed(object sender, EventArgs e)
            {
                if (Device.RuntimePlatform == Device.iOS)
                {
                    chatTextInput.Unfocus();
                }
                chatTextInput.Focus();
            }
    
            public void UnFocusEntry()
            {
                chatTextInput?.Unfocus();
            }
        }
    }
    

    I am using the Chat Input view inside my GroupChatPage:

    <ContentPage x:Class="iSmart.Core.Views.GroupChatPage"
                 Title="{Binding PageTitle}"
                 xmlns:local="clr-namespace:iSmart.Core.Helpers"
                 xmlns:partials="clr-namespace:iSmart.Core.Views.Partials"
                 xmlns:roundImage="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
                 xmlns:controls="clr-namespace:iSmart.Core.Controls">
        <ContentPage.Resources>
            <ResourceDictionary>
                <local:ChatTemplateSelector x:Key="MessageTemplateSelector"/>
                <ResourceDictionary Source="/Styles/Styles.xaml" />
                <ResourceDictionary Source="/Styles/Colors.xaml" />
            </ResourceDictionary>
        </ContentPage.Resources>
        <ContentPage.Content>
            <AbsoluteLayout BackgroundColor="Transparent">
                <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
                    <Grid RowSpacing="0"
                          ColumnSpacing="0" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <!--Chatting space-->
                            <RowDefinition Height="1"/>
                            <!--Seperator between Chat space and Typing space-->
                            <RowDefinition Height="Auto"/>
                            <!--Typing Space-->
                        </Grid.RowDefinitions>
                        <ListView Grid.Row="0"
                          ItemTemplate="{StaticResource MessageTemplateSelector}"
                          ItemsSource="{Binding Messages}"
                          Margin="0" 
                          SelectionMode="None"
                          Rotation="180"
                          ItemTapped="Handle_ItemTapped"
                          FlowDirection="RightToLeft"
                          HasUnevenRows="True"
                          VerticalOptions="FillAndExpand"
                          SeparatorColor="Transparent"
                          x:Name="ChatList" BackgroundColor="Transparent">
                        </ListView>
                        <BoxView Grid.Row="1"
                         HorizontalOptions="FillAndExpand"
                         HeightRequest="1"
                         BackgroundColor="White"/>
                        <partials:ChatInputBarView Grid.Row="2"
                                           Margin="0,0,10,0"
                                           x:Name="chatInput"/>
                    </Grid>
                </StackLayout>
            </AbsoluteLayout>
        </ContentPage.Content>
    </ContentPage>
    

    OnSendCommand is Binded to the method below:

    public async Task OnSendAction()
            {
                Dictionary<int, string> msg = new Dictionary<int, string>();
                if (!string.IsNullOrEmpty(TextToSend))
                {
                    msg[0] = TextToSend;
                    msg[1] = UserName;
                    msg[2] = UserId;
                    msg[3] = DateTime.Now.ToString("hh:mm tt");
                    pubnub.Publish()
                           .Message(msg)
                           .Channel(MyChannel)
                           .Async(new PNPublishResultExt((publishResult, publishStatus) =>
                           {
                               if (!publishStatus.Error)
                               {
                                   Console.WriteLine("Publish success");
                               }
                               else
                               {
                                   Console.WriteLine("Publish failed");
                               }
                           }));
                    Messages.Insert(0, new MessageModel() { Text = msg[0], User = msg[1], WWID = msg[2], Time = msg[3], Status = StatusResult.NULL });
                    TextToSend = string.Empty;
                    await PostNotificationToGroup(msg[0]);
                }
            }
    
  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post a basic demo?

Sign In or Register to comment.