[WASM Skia] Fix soft keyboard content cutoff using Visual Viewport API

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/Hosting/WebAssemblyBrowserHost.cs

@@ -52,6 +52,9 @@ protected override void Initialize()
 		ApiExtensibility.Register<MediaPlayer>(typeof(IMediaPlayerExtension), o => new BrowserMediaPlayerExtension(o));
 		ApiExtensibility.Register<MediaPlayerPresenter>(typeof(IMediaPlayerPresenterExtension), o => new BrowserMediaPlayerPresenterExtension(o));
 		ApiExtensibility.Register<CoreWebView2>(typeof(INativeWebViewProvider), o => new BrowserWebViewProvider(o));
+		ApiExtensibility.Register<Windows.UI.ViewManagement.InputPane>(
+			typeof(Windows.UI.ViewManagement.IInputPaneExtension),
+			_ => new Uno.WinUI.Runtime.Skia.WebAssembly.InputPaneExtension());
 
 		NativeMethods.PersistBootstrapperLoader();
 

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/UI/ViewManagement/InputPaneExtension.cs

@@ -0,0 +1,92 @@
+using System;
+using System.Runtime.InteropServices.JavaScript;
+using Windows.UI.ViewManagement;
+
+namespace Uno.WinUI.Runtime.Skia.WebAssembly;
+
+/// <summary>
+/// WebAssembly implementation of InputPane functionality for tracking soft keyboard visibility.
+/// </summary>
+/// <remarks>
+/// This implementation uses the Visual Viewport API to detect when the soft keyboard appears
+/// on mobile browsers. When the keyboard is shown:
+/// 
+/// 1. The visualViewport.height decreases to reflect the visible area (excluding keyboard)
+/// 2. The TypeScript side (InputPaneExtension.ts) monitors these changes
+/// 3. When a significant height change is detected (>100px), it's considered a keyboard event
+/// 4. The C# InputPane is updated with the occluded rectangle representing the keyboard area
+/// 5. WebAssemblyWindowWrapper.ts uses visualViewport dimensions for window sizing
+/// 
+/// This ensures that:
+/// - The app layout uses only the visible viewport area (above the keyboard)
+/// - ScrollViewers can properly scroll content into view
+/// - Dialogs and other UI elements fit within the available space
+/// - Content is not cut off by the soft keyboard
+/// 
+/// The implementation is compatible with iOS Safari, Chrome on Android, and other modern mobile browsers
+/// that support the Visual Viewport API. For browsers without this API, it falls back to tracking
+/// window.innerHeight changes.
+/// </remarks>
+internal partial class InputPaneExtension : IInputPaneExtension
+{
+	private static InputPaneExtension? _instance;
+
+	public InputPaneExtension()
+	{
+		_instance = this;
+		NativeMethods.Initialize(this);
+	}
+
+	public bool TryShow()
+	{
+		// In browsers, the keyboard is shown automatically when an input is focused
+		// We don't need to explicitly show it
+		return true;
+	}
+
+	public bool TryHide()
+	{
+		// In browsers, we can blur the active element to hide the keyboard
+		NativeMethods.HideKeyboard();
+		return true;
+	}
+
+	[JSExport]
+	private static void OnKeyboardVisibilityChanged(bool visible, double occludedHeight)
+	{
+		if (_instance is null)
+		{
+			return;
+		}
+
+		var inputPane = InputPane.GetForCurrentView();
+		var windowWrapper = Uno.UI.Runtime.Skia.WebAssemblyWindowWrapper.Instance;
+
+		if (visible && occludedHeight > 0)
+		{
+			// Calculate the occluded rect based on the keyboard height
+			var bounds = windowWrapper.Bounds;
+			var occludedRect = new Windows.Foundation.Rect(
+				0,
+				bounds.Height - occludedHeight,
+				bounds.Width,
+				occludedHeight
+			);
+			inputPane.OccludedRect = occludedRect;
+		}
+		else
+		{
+			// No occlusion when keyboard is hidden
+			inputPane.OccludedRect = new Windows.Foundation.Rect(0, 0, 0, 0);
+		}
+	}
+
+	private static partial class NativeMethods
+	{
+		[JSImport("globalThis.Uno.UI.Runtime.Skia.InputPaneExtension.initialize")]
+		public static partial void Initialize([JSMarshalAs<JSType.Any>] object instance);
+
+		[JSImport("globalThis.Uno.UI.Runtime.Skia.InputPaneExtension.hideKeyboard")]
+		public static partial void HideKeyboard();
+	}
+}

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/ts/Runtime/InputPaneExtension.ts

@@ -0,0 +1,139 @@
+namespace Uno.UI.Runtime.Skia {
+	export class InputPaneExtension {
+		private static _exports: any;
+		private static _instance: InputPaneExtension | null = null;
+		private _managedInstance: any;
+		private _lastViewportHeight: number = 0;
+		private _isKeyboardVisible: boolean = false;
+
+		// Threshold for considering keyboard visible (in pixels)
+		private static readonly KEYBOARD_THRESHOLD_PX = 100;
+		// Minimum viewport height change to trigger an update (in pixels)
+		private static readonly MIN_HEIGHT_CHANGE_PX = 1;
+
+		public static async initialize(managedInstance: any): Promise<void> {
+			const module = <any>window.Module;
+			if (InputPaneExtension._exports === undefined && module.getAssemblyExports !== undefined) {
+				const browserExports = await module.getAssemblyExports("Uno.UI.Runtime.Skia.WebAssembly.Browser");
+				InputPaneExtension._exports = browserExports.Uno.WinUI.Runtime.Skia.WebAssembly.InputPaneExtension;
+			}
+
+			if (InputPaneExtension._instance === null) {
+				InputPaneExtension._instance = new InputPaneExtension(managedInstance);
+			}
+		}
+
+		private constructor(managedInstance: any) {
+			this._managedInstance = managedInstance;
+			this.setupVisualViewportListeners();
+		}
+
+		private setupVisualViewportListeners(): void {
+			// Use visualViewport API if available (modern browsers, mobile Safari, Chrome)
+			if (window.visualViewport) {
+				this._lastViewportHeight = window.visualViewport.height;
+
+				window.visualViewport.addEventListener("resize", () => this.onVisualViewportResize());
+				window.visualViewport.addEventListener("scroll", () => this.onVisualViewportScroll());
+			} else {
+				// Fallback for older browsers - track window resize
+				this._lastViewportHeight = window.innerHeight;
+				window.addEventListener("resize", () => this.onWindowResize());
+			}
+		}
+
+		private onVisualViewportResize(): void {
+			if (!window.visualViewport) {
+				return;
+			}
+
+			const visualViewport = window.visualViewport;
+			const viewportHeight = visualViewport.height;
+			const windowHeight = window.innerHeight;
+
+			// Calculate the keyboard height
+			// The visual viewport height decreases when the keyboard appears
+			const keyboardHeight = windowHeight - viewportHeight;
+
+			// Consider keyboard visible if it occludes more than the threshold
+			// This helps avoid false positives from small browser UI changes
+			const isKeyboardVisible = keyboardHeight > InputPaneExtension.KEYBOARD_THRESHOLD_PX;
+
+			if (isKeyboardVisible !== this._isKeyboardVisible || 
+				Math.abs(viewportHeight - this._lastViewportHeight) > InputPaneExtension.MIN_HEIGHT_CHANGE_PX) {
+
+				this._isKeyboardVisible = isKeyboardVisible;
+				this._lastViewportHeight = viewportHeight;
+
+				// Notify managed code about keyboard visibility change
+				if (InputPaneExtension._exports) {
+					InputPaneExtension._exports.OnKeyboardVisibilityChanged(
+						isKeyboardVisible,
+						isKeyboardVisible ? keyboardHeight : 0
+					);
+				}
+			}
+		}
+
+		private onVisualViewportScroll(): void {
+			// When the virtual keyboard appears on some devices,
+			// the viewport may scroll. We should handle this as well.
+			this.onVisualViewportResize();
+		}
+
+		private onWindowResize(): void {
+			// Fallback handler for browsers without visualViewport API
+			const currentHeight = window.innerHeight;
+
+			if (this._lastViewportHeight === 0) {
+				this._lastViewportHeight = currentHeight;
+				return;
+			}
+
+			const heightDiff = this._lastViewportHeight - currentHeight;
+			const isKeyboardVisible = heightDiff > InputPaneExtension.KEYBOARD_THRESHOLD_PX;
+
+			if (isKeyboardVisible !== this._isKeyboardVisible) {
+				this._isKeyboardVisible = isKeyboardVisible;
+
+				// Update last height only when keyboard state changes
+				if (!isKeyboardVisible) {
+					this._lastViewportHeight = currentHeight;
+				}
+
+				if (InputPaneExtension._exports) {
+					InputPaneExtension._exports.OnKeyboardVisibilityChanged(
+						isKeyboardVisible,
+						isKeyboardVisible ? heightDiff : 0
+					);
+				}
+			}
+		}
+
+		public static hideKeyboard(): void {
+			// Blur the active element to hide the keyboard
+			if (document.activeElement instanceof HTMLElement) {
+				document.activeElement.blur();
+			}
+		}
+	}
+}
+
+// Expose InputPaneExtension methods to globalThis for C# JSImport access
+if (globalThis.Uno === undefined) {
+	globalThis.Uno = {} as any;
+}
+if (globalThis.Uno.UI === undefined) {
+	globalThis.Uno.UI = {} as any;
+}
+if (globalThis.Uno.UI.Runtime === undefined) {
+	globalThis.Uno.UI.Runtime = {} as any;
+}
+if (globalThis.Uno.UI.Runtime.Skia === undefined) {
+	globalThis.Uno.UI.Runtime.Skia = {} as any;
+}
+
+(globalThis.Uno.UI.Runtime.Skia as any).InputPaneExtension = {
+	initialize: Uno.UI.Runtime.Skia.InputPaneExtension.initialize,
+	hideKeyboard: Uno.UI.Runtime.Skia.InputPaneExtension.hideKeyboard
+};

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/ts/Runtime/WebAssemblyWindowWrapper.ts

@@ -49,7 +49,14 @@ namespace Uno.UI.Runtime.Skia {
 
 			await Accessibility.setup();
 
-			window.addEventListener("resize", x => this.resize());
+			// Use visualViewport events when available (for soft keyboard support on mobile)
+			if (window.visualViewport) {
+				window.visualViewport.addEventListener("resize", x => this.resize());
+				window.visualViewport.addEventListener("scroll", x => this.resize());
+			} else {
+				// Fallback for browsers without visualViewport API
+				window.addEventListener("resize", x => this.resize());
+			}
 
 			window.addEventListener("contextmenu", x => {
 				x.preventDefault();
@@ -103,8 +110,22 @@ namespace Uno.UI.Runtime.Skia {
 		}
 
 		private resize() {
-			var rect = document.documentElement.getBoundingClientRect();
-			this.onResize(this.owner, rect.width, rect.height, globalThis.devicePixelRatio);
+			// Use visualViewport when available (for mobile soft keyboard support)
+			// visualViewport gives us the actual visible area, excluding soft keyboard
+			let width: number;
+			let height: number;
+
+			if (window.visualViewport) {
+				width = window.visualViewport.width;
+				height = window.visualViewport.height;
+			} else {
+				// Fallback for browsers without visualViewport API
+				var rect = document.documentElement.getBoundingClientRect();
+				width = rect.width;
+				height = rect.height;
+			}
+
+			this.onResize(this.owner, width, height, globalThis.devicePixelRatio);
 		}
 
 		public static setCursor(cssCursor: string) {