react-native-windows
react-native-windows copied to clipboard
microsoft
Tapping on a text field in a WebView2 control does not trigger the on-screen keyboard
Problem Description
Hello,
In the PowerApps Windows UWP desktop app, we currently have an accessibility bug where a touch event inside the WebView2 control would not trigger the touch keyboard. We built our own UI manager with WebView2 using C# with an AttributedViewManager<WebView2>. The WinUI version I use is 2.8.1, with WebView2 version being 1.0.1264.42.
We tried with a XAML app without React Native Windows, and the issue does not reproduce in this case.
See the below GIF: I created a sample RNW app that points to the Google page. The left is a XAML app with RNW and triggers the touch keyboard, while the right with RNW does not.
For additional information:
- we already set IsPerspectiveEnabled=false
- I tried with two modes:
- Tablet mode with Surface Pro X (with x86) without any physical keyboard: it has the same behavior. The onscreen keyboard is not triggered which is not normal.
- On my laptop with a physical keyboard, if you have a touch screen if should trigger the onscreen keyboard: see Use the On-Screen Keyboard (OSK) to type (microsoft.com): "A PC with a touchscreen also has a touch keyboard. The touch keyboard will appear when you tap inside a text box when your PC is in tablet mode.". I have Windows 11 so there isn't a tablet mode, but if you first run tabtip.exe (the onscreen keyboard) once, but then it gets triggered on every touch.
- We don't have any customization regarding the Keyboard API in react-native. As long as it works in WebView2Samples/SampleApps/webview2_sample_uwp at main · MicrosoftEdge/WebView2Samples · GitHub which is a pure XAML app, I wouldn't expect react-native-windows to be interfering with the onscreen keyboard here, except if there is a configuration I miss.
Steps To Reproduce
- Build a RNW app with a WebView2 control (for example the react native gallery)
- Go to any web page with a text field.
- Try to trigger the on-screen keyboard by tapping on the text field with a touch screen
Expected Results
The on-touch keyboard should appear
CLI version
npx react-native --version
Environment
npx react-native info
Target Platform Version
10.0.19041
Target Device(s)
Desktop
Visual Studio Version
Visual Studio 2019
Build Configuration
Debug
Snack, code example, screenshot, or link to a repository
No response
@chiaramooney does this repro with Gallery? (scenario seems like it should require nothing custom beyond that)
@chrisglein Yes there's been a thread about this on the teams channel. It does repro in gallery but I only have access to a device that has a physical keyboard, so I'm not sure if this fully tests the scenario. Would a touch keyboard only appear if you were using a device that did not have a physical keyboard available? If so, we'd need to install gallery on a tablet and confirm.
Main questions at the moment:
- Why would this not work out of the box if the correct behavior is happening in XAML? What ideas does the team have for what code could be missing?
- According to my gallery testing, it affects both WebView and WebView2, so if a fix is needed it will be needed for both modules.
- Is this work we have the cycles to take on, or will it be up to the community to implement this functionality if they need it?
It's possible RNW is interrupting the propagation of the event. Needs further investigation.
@chrisglein, @chiaramooney, as said in the chat, I tried with two modes:
- Tablet mode with Surface Pro X (with x86) without any physical keyboard: it has the same unexpected behavior.
- On my laptop with a physical keyboard
- In Windows 10: the touch keyboard will appear when you tap inside a text box when your PC is in tablet mode. Use the On-Screen Keyboard (OSK) to type (microsoft.com): "A PC with a touchscreen also has a touch keyboard. The touch keyboard will appear when you tap inside a text box when your PC is in tablet mode."
- In Windows 11, the behavior is it should trigger the onscreen keyboard if you launched previously tabtip.exe (the keyboard app).
If you want me to confirm on a tablet for the RN Gallery app, let me know.
The issue was in the WebView2. It will be fixed with Edge 111, expected beginning of March. What happened is that for UWP apps that creates the WebView after app activation, the check done by the SIP handler to detect if it is done in the foreground was buggy (it checked if the thread id was the one from the root parent, while after app activation it can be AppFrameWindow from sihost.exe