Unplanned
Last Updated: 19 Oct 2023 12:02 by ADMIN
Winston
Created on: 12 Oct 2023 10:31
Category: RichTextEditor
Type: Feature Request
1
RichTextEditor: [iOS] Option to control the toolbar position when keyboard is opened

We are currently evaluating the Telerik RichTextEditor MAUI component here:

https://docs.telerik.com/devtools/maui/controls/richtexteditor/toolbar/overview

However our application is a Xamarin iOS/Android Native app, which is now migrated to .NET 7 iOS/Android.

 

We have a simple RadContentView MAUI markup page:


<?xml version="1.0" encoding="utf-8" ?>
<telerik:RadContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" 
             x:Class="MAUIThirdPartyControlPOC.RichTextEditorView">


    <Grid RowDefinitions="{OnIdiom Phone='*, Auto'}">

 

            <telerik:RadRichTextEditor x:Name="richTextEditor"
                                   Grid.Row="{OnIdiom Phone=0}"
                                   Source="{Binding Source}">

        </telerik:RadRichTextEditor>
        <telerik:RadRichTextEditorToolbar x:Name="richTextToolbar"
                                          Grid.Row="{OnIdiom Default=1, Phone=1}"
                                          RichTextEditor="{x:Reference richTextEditor}"
                                          Margin="{OnIdiom Phone=0}" />

           </Grid>
</telerik:RadContentView>

Then in our sample iOS application we are doing the following to do Native Embedding:


using Foundation;
using Microsoft.Maui.Embedding;
using UIKit;
using Telerik.Maui.Controls.Compatibility;
using Telerik.Maui.Controls;
using Microsoft.Maui.Platform;
using Microsoft.Maui.Controls;

namespace MAUIThirdPartyControlPOC;

[Register ("AppDelegate")]
public class AppDelegate : UIApplicationDelegate {
	public override UIWindow? Window {
		get;
		set;
	}

	public static MauiContext _mauiContext;

    public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
	{
		// create a new window instance based on the screen size
		Window = new UIWindow(UIScreen.MainScreen.Bounds);
		
		// create a UIViewController with a single UILabel
		var vc = new UIViewController();
		vc.View.BackgroundColor = UIColor.Orange;

		Window.RootViewController = vc;

		// make the window visible
		Window.MakeKeyAndVisible();


		MauiAppBuilder builder = MauiApp.CreateBuilder();
        builder.UseMauiEmbedding<Microsoft.Maui.Controls.Application>();
		builder.UseTelerik();



        // Register the Window
        builder.Services.Add(new Microsoft.Extensions.DependencyInjection.ServiceDescriptor(typeof(UIWindow), Window));
        MauiApp mauiApp = builder.Build();
        _mauiContext = new MauiContext(mauiApp.Services);

        var richText = new RichTextEditorView();
        var richTextView = richText.ToPlatform(_mauiContext);


        richTextView.TranslatesAutoresizingMaskIntoConstraints = false;

        vc.View!.AddSubview(richTextView);



        NSLayoutConstraint.ActivateConstraints(new[]
		{
			richTextView.WidthAnchor.ConstraintEqualTo(vc.View.WidthAnchor),
            richTextView.HeightAnchor.ConstraintEqualTo(vc.View.HeightAnchor)

        });
        return true;
	}


}

When you run this, and focus in the RichTextEditor, the on screen keyboard on iOS appears, however the content's inset does not slide up so that the toolbar is accessible.

The only mention of the keyboard pushing contents was on the RTB's documentation page:

  • On iOS—If the RadRichTextEditorToolbar is positioned under the keyboard, when the keyboard shows, the control is translated over the keyboard so users can access it without a problem. Due to the .NET MAUI implementation, it is important that the RadRichTextEditorToolbar is placed in a container which bounds will contain it after the control is translated over the keyboard. Otherwise, the tap and pan gestures on the RadRichTextEditorToolbar will not work until the keyboard is hidden and the control is translated back to its original place.

However it does not mention anything about how to handle it with Native embedding.

Thanks in advance.

3 comments
ADMIN
Didi
Posted on: 19 Oct 2023 12:02

Hi Winston,

Could you please send me the sample app you use for testing? I want to review the complete implementation and research the case further.

I tested the Toolbar inside the .NET MAUI ContentView and the result is the same as the RadContentView :

<Grid RowDefinitions="*,Auto">
        <ContentView BackgroundColor="Red">



        </ContentView>


        <ContentView VerticalOptions="End" Grid.Row="1" BackgroundColor="LightBlue">
            <Grid RowDefinitions="Auto,Auto,Auto">

                    <Entry Placeholder="entry"/>
            <telerik:RadRichTextEditorToolbar RichTextEditor="{x:Reference editor}" Grid.Row="2"/>
                <telerik:RadRichTextEditor x:Name="editor" Grid.Row="1"/>
            </Grid>
        
        </ContentView>

    </Grid>

in .NET MAUI app the toolbar goes above the keyboard. My assumption is the behavior is a missing functionality for the native embedding approach. 

 Looking forward to your reply. 

Regards,
Didi
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
Winston
Posted on: 16 Oct 2023 10:10

@Didi

 

Thanks for your reply.

So in a nutshell, is this not supported?

Because I ran the Telerik sample, and noticed that for the RichTextEditor, when the toolbar was positioned at the bottom, the RadContentView seemed to handle resizing the view by pushing the contents up when the on screen keyboard was shown. So with native embedding I'm guessing the RadContentView cannot handle the the keyboard correctly, is this correct?

We really want to use the Rad RichTextEditor in our mobile app, so if we can address these issues then we are happy to buy a license. 

Thanks

ADMIN
Didi
Posted on: 16 Oct 2023 10:06

Hi Winston,

Thank you for the provided information.

Native embedding is just an approach to consume .NET Maui controls in native app. It does not cover the iOS keyboard behavior. You can add the RichTextEditor toolbar above the control, for example:

<Grid RowDefinitions="Auto,*">
    <telerik:RadRichTextEditorToolbar RichTextEditor="{x:Reference RTE}" />
    <telerik:RadRichTextEditor x:Name="RTE" Grid.Row="1"/>
</Grid>

I have converted this bug report to a feature request.

Please note that if you have input filed and open the keyboard, if this input is on the place where the keyboard should be displayed, the keyboard covers these input fields. This happens with entry, editors controls, all controls that receives focus and have input. This behavior is not related to Telerik .MAUI controls, it happens in .NET MAUI controls too. 

In general, Telerik .NET MAUI controls do not claim support for native embedding. Some of the controls throws null ref exception. We have this item logged: https://feedback.telerik.com/maui/1604076-null-reference-exception-when-using-native-embedding 

I hope the provided information will be of help.

Regards,
Didi
Progress Telerik

A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com