WebView Renderer Migration does not load HTML or URL content on Maui compatibility renderer

[DanielCauser]

Discussed in #18808

I decided to open this ticket, since, after some discussions with the community, there were big indications that this is a bug with the compatibility of the renderer. This was my conclusion:

Since ViewRenderer inherits directly from VisualElementRenderer, it should be working in Maui
maui/src/Controls/src/Core/Compatibility/Handlers/iOS/ViewRenderer.cs

^{Originally posted by DanielCauser November 16, 2023}
Hello!

I'm currently working on migrating our Xamarin Forms app into .net Maui. That said, I'm migrating the Xamarin Forms renderers and using the Compatibility path to simplify the migration process.

I created this discussion because I'm not sure if it is a bug or I'm missing something on my migration.

Here is the outcome of the migration of the Xamarin Forms into .Net MAUI. As you can see, the renderer in the XF platform loads the HTML content, whereas rendererer in the .NET MAUI compatibility mode does not.

I'm also attaching the zip of the projects I'm using to replicate the issue.
CustomRenderer.zip
The renderer looks like the one bellow. I pick the properties from the shared control and render them on the native webview.

namespace XamarinCustomRenderer.iOS.Renderers
{
    public class HybridWebViewRenderer : ViewRenderer<HybridWebView, WKWebView>
    {

        protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null && e.NewElement != null)
            {
                _userController = new WKUserContentController();

                var config = new WKWebViewConfiguration
                {
                    UserContentController = _userController,
                    IgnoresViewportScaleLimits = true
                };

                var webView = new WKWebView(Frame, config)
                {
                    NavigationDelegate = new HybridWkWebViewDelegate(this),
                    UIDelegate = new WKWebViewUIDelegate()
                };

                webView.ScrollView.ShowsVerticalScrollIndicator = false;
                webView.ScrollView.ShowsHorizontalScrollIndicator = false;

                webView.LoadHtmlString(new NSString(e.NewElement.HtmlContent), null);
                //var link = new NSUrl(e.NewElement.URL);
                //var request = new NSUrlRequest(url: link);
                //webView.LoadRequest(request);

                SetNativeControl(webView);
            }
        }  

[mattleibow]

I did a test and set the background color of the native webview to orange in the renderer, and there is an orange block on the screen.

It appears as if the webview is rendering, but there is no content for some reason. @rmarinho you did the WebView handler before, was there some ordering issue or something that needed to take place?

[ghost]

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

[DanielCauser]

@mattleibow @rmarinho, since I started this migration way before the end of the life of Xamarin Forms, I do have time to migrate the Renderer to a Maui Handler. Do y'all suggest I try that instead of sticking to the WebView renderer compatibility?

[DanielCauser]

I was able to find a work around. Here are the steps.

I brought into my project the following nugets:

<ItemGroup>
	<PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
	<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="$(MauiVersion)" />
</ItemGroup>

After that. on the MauiProgram.cs file I added:

using Microsoft.Maui.Controls.Compatibility.Hosting;
.UseMauiCompatibility()
handlers.AddCompatibilityRenderer(

public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCompatibility()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            })
            .ConfigureMauiHandlers((handlers) =>
            {
#if ANDROID
                handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.Droid.Renderers.PressableViewRenderer));
#elif IOS
                handlers.AddHandler(typeof(PressableView), typeof(XamarinCustomRenderer.iOS.Renderers.PressableViewRenderer));
                handlers.AddCompatibilityRenderer(typeof(HybridWebView), typeof(MauiCustomRenderer.iOS.Renderers.HybridWebViewRenderer));
#endif
            });

        return builder.Build();
    }

And Finally on my HybridWebViewRenderer.cs class, I've setup the inheritance to come from the class
ViewRenderer under the namespace Microsoft.Maui.Controls.Compatibility.Platform.iOS

The issue is that the Renderers under Microsoft.Maui.Controls.Compatibility.Platform.iOS are all set to obsolete. However, since this solves my immediate issue it is fine. I will keep my eyes here in case there is any updates from the Maui team.