When We set 'contenteditable=false inside contenteditable=true block' the contenteditable=false not working properly on [UWP][WebView] platform

Question

When We set 'contenteditable=true as parent and contenteditable=false as child element' the contenteditable=false not working properly on UWP [WebView] platform. Its able to edit the content on child element.

Steps to Reproduce :

1. Run the attached sample
2. Click and type the second line ( I have set contenteditable=false )
3. The text will be added in the second line

Expected Behavior : When focus on the child block and type the text, but do not add it.

Actual Behavior : When focus on the child block and type the text, the text will be added.

Simple sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebviewSample1037629117

We created a video for illustrating the same and it can be downloaded from the below links,

https://www.syncfusion.com/downloads/support/directtrac/general/ze/UWPWebview125869207

Answer 1

Hello,

Welcome to Microsoft Q&A!

I could reproduce the behavior using the sample. Currently there is no solution to fix the issue within the WebView control. I'd suggest you submit feedback about this API in the Feedback Hub. You could find the Feedback Hub in the Start Menu. Please select Developer Platform->API Feedback as the category when you submit your request. The related team will check the request. You could also share the link here after you submitted.

A workaround is using WebView2 from WinUI2. You could download the WinUI2 NuGet Package in your project. For more detailed steps refer to this document:https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/winui2

Here is the code that I'm using. Using the WebView2 could get the expected behavior.

Xaml:

        xmlns:controls="using:Microsoft.UI.Xaml.Controls"
        
        <controls:WebView2 x:Name="MyWebView" Width="800" Height="500" />

Code-behind:

  public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            Loaded += MainPage_Loaded;
        }

        private async void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            await MyWebView.EnsureCoreWebView2Async();

            MyWebView.CoreWebView2.SetVirtualHostNameToFolderMapping(
                "appassets", "Assets", CoreWebView2HostResourceAccessKind.Allow);

            MyWebView.Source = new Uri("http://appassets/index.html");
        }
    }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.