WebView2Feedback
WebView2Feedback copied to clipboard
MicrosoftEdge
[Problem/Bug]: Issue with WebView2CompositionControl .NETFramework4.8
What happened?
WebView2CompositionControl component can't be focused, when it is nested under "ScrollViewer". Like this:
<ScrollViewer> <wv2:WebView2CompositionControl /> </ScrollViewer>
Focus of webview control is immediately cancelled and "Focus Lost" event is raised, after click at element within navigated web url (e.g TextBox).
If ScrollViewwer id set with property Focusable="False" like it is below, it is possible select textbox and type into it. But is is not possble to use navigation narrows or other navigation keys (Home, End, PageUp/Dn)
<ScrollViewer Focusable="False"> <wv2:WebView2CompositionControl /> </ScrollViewer>
I do develop an plugin dll into .NET Framework application and don't have an possibility to change/remove the <ScrollViewer>. Because it is part of View, where I need to inject my webview2 component.
Importance
Important. My app's user experience is significantly compromised.
Runtime Channel
Stable release (WebView2 Runtime)
Runtime Version
132.0.2957.140
SDK Version
1.0.3065.39
Framework
WPF
Operating System
Windows 11
OS Version
22631.4751
Repro steps
It is reproducible by creating simple project with 2 webview components and do navigate. Upper webview is nested to scrollviewer and the lower one is not. Clicking on text box in upper webview, and using narrow keys, you will se how focus lost event is fired from webview element. Attached is project I do use for testing. It is copy of situation I do face in production application. My custom view is injected into main view and main view is nesting region in ScrollViewer. Because of that, I can't change Scrollviewer settings. Like This:
MainWindow.yaml:
<ScrollViewer> <local:WebViewControlComponent Focusable="True"></local:WebViewControlComponent> </ScrollViewer>
WebViewControlComponent.yaml:
<UserControl> <Grid> <wv2:WebView2CompositionControl Visibility="Visible" MinHeight="100" /> </Grid> </UserControl>
Any help is highly appreciated, I have been waiting for release of this WebView2CompositionControl a while due to not working navigation keys in Webview2 and PanelZ index.
Repros in Edge Browser
No, issue does not reproduce in the corresponding Edge version
Regression
No, this never worked
Last working version (if regression)
No response
Dear dev team Is there any update related to this issue? Do you need support from my side? Thank you Robert
I have the same problem. You should be able to easily recreate it with a very simple html page consisting of only a textbox to enter something in and put the WebView2CompositionControl somewhere inside a ScrollViewer. I have something like this:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel ... other stuff
<Border BorderBrush="Gray" BorderThickness="1" Margin="10,0,10,2" Grid.Row="1">
<wv2:WebView2CompositionControl x:Name="webView" Height="300" /> <!-- CAN'T PUT IN ANYTHING FROM KEYBOARD
</Border>
</Grid>
</ScrollViewer>
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Input</title>
</head>
<body>
<input type="text" id="dummyInput" style="width: 100%; height: 50px;" /> <-- NOTHING HAPPENS WHEN TYPING
</body>
</html>
This issue does not manifest when using the regular WebView2. Also, the issue does not manifest if the WebView2CompositionControl in NOT in a ScrollViewer. It only happens with the WebView2CompositionControl inside a ScrollViewer.
I think this is the same issue: https://github.com/MicrosoftEdge/WebView2Feedback/issues/5057
In the meantime, I've used this as a workaround (it's ugly) and this works for me. Its hard to say what kind of unintended consequences this might have on more complex apps so test thoroughly.
this.AddHandler(UIElement.LostFocusEvent, new RoutedEventHandler((s, e) =>
{
Debug.WriteLine($"Lost focus: {e.OriginalSource}");
// if the webview lost focus, we can try to refocus it
var focusedElement = Keyboard.FocusedElement;
if (e.OriginalSource is WebView2CompositionControl && focusedElement is ScrollViewer)
{
Debug.WriteLine("Refocusing WebView2...");
webView.Focus();
}
}), true);
Hopefully they implement a fix soon
Update: I ran into problems with the above solution but after banging my head into the wall for a long time, I think I found a more elegant work around.
make a custom ScrollViewer and override the OnKeyDown and have it do nothing at all:
public class MyScrollViewer : ScrollViewer
{
protected override void OnKeyDown(KeyEventArgs e)
{
// intentionally empty to prevent navigation keys from changing focus outside the webview
}
}
and set Focusable to False in the xaml like so:
<local:MyScrollViewer Focusable="False">
<wv2:WebView2CompositionControl />
</local:MyScrollViewer>
What I find strange is that if it were just a text box inside the scroll viewer, the arrow keys move the cursor within the text works as expected. Also, setting Focusable="False" is only necessary when using the WebView2CompositionControl, but not needed when using the normal WebView2.
Hello all Thank you for an advices. The production environment is a complex application where:
- using dependency injection I can add view into existing WPF window, so my webview is a part of WPF UserControl and I can't change it.
- I can't manipulate parent window, so I can't change properties of scrollviewer
- even if I will manage to change parent view properties (somehow), The parent window contains multiple elements, that may be impacted
- lost focus/refocus nasty workaround mentioned above isn't viable, because there is multiple elements inside scroll viewer and it is not possible which action is causing lost focus (issue with webview control or real focus change) I need to wait for fix from dev team.
I tried to encapsulate webview into another scrollviewer in my code and change properties of it inside of my code, to override parent one. But no luck there.
Thank you for your help. Robert
I did resolve this issue with WebView2 after some period of time with workaround inspired by https://github.com/MicrosoftEdge/WebView2Feedback/issues/5099
It seems like the handler of OnPreviewKeyDown implemented in WebView2 is not working fine if it is embedded to scrollviewer object.
internal class CustomWebView2 : WebView2 { protected override void OnPreviewKeyDown(KeyEventArgs e) { //do nothing } }
So I don't need the WebViewControlComponent now to be implemented in my solution now. But it would be good to have it, hence I do miss possibility to use Panel.Z index.