In my application Xamarin Forms, I have WebViewone that is used as a form by inserting a div with contentEditablein true. Everything worked fine until the upgrade to AppCompat.
Now a strange white text appears (white square) when the user tries to write inside WebView, which disappears when the keyboard is rejected. To find the root cause of the problem, I created a sample project with only one page containing only a vertical stack layout containing a different stack layout and web browsing. I noticed that this problem occurs if the height of the internal layout of the stack is sufficient for the web view to be closed by the keyboard when it appears. In this case, the webview is pushed up, and this strange overlay appears. Web browsing is fully functional and you can write text even if it is hidden by this white square, which disappears when the keyboard is rejected.
This is an example of a simple page that can be used to verify a problem. Buttons are added only to increase and decrease the size of the layout to make it easier to identify a problem.
public class MainPage : ContentPage
{
const string ContentEdit = @"<div contentEditable=""true"" style =""min-height: 200px"">";
const string ContentEditEnd = "</div>";
const string EmptyDocument = @"<body>" + ContentEdit + ContentEditEnd + @"</body>";
WebView webView;
public MainPage()
{
InitializePage();
}
void InitializePage()
{
webView = new WebView()
{
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
};
var button1 = new Button
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Text = "-",
};
var button2 = new Button
{
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
Text = "+",
};
var tallLayout = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HeightRequest = 200,
BackgroundColor = Color.Lime,
Children = { button1, button2, },
};
button1.Clicked += (sender, e) => tallLayout.HeightRequest = tallLayout.Height - 20;
button2.Clicked += (sender, e) => tallLayout.HeightRequest = tallLayout.Height + 20;
var layout = new StackLayout
{
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.FillAndExpand,
Children = { tallLayout, webView },
};
Content = layout;
}
protected override void OnAppearing()
{
InitializeEmptyContent();
}
public void InitializeEmptyContent()
{
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = EmptyDocument;
webView.Source = htmlSource;
}
}
I tried to reproduce this simple layout also using my own Android, but it seems I don't have a similar error. Is this a Xamarin Forms bug or am I doing something wrong?