Merge pull request #8912 from AvaloniaUI/fixes/wasm-tab-key-handling

WASM: fix tab key handling

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor

@@ -1,7 +1,11 @@
-<div id="container" class="avalonia-container" tabindex="0" oncontextmenu="return false;"
+<div id="container" @ref="_containerElement"  
+     class="avalonia-container" 
+     tabindex="0" oncontextmenu="return false;"
      @onwheel="OnWheel"
      @onkeydown="OnKeyDown"
+     @onkeydown:preventDefault="true"
      @onkeyup="OnKeyUp"
+     @onkeyup:preventDefault="true"
      @onpointerdown="OnPointerDown"
      @onpointerup="OnPointerUp"
      @onpointermove="OnPointerMove"
@@ -16,6 +20,8 @@
         onpaste="return false;"
         oncopy="return false;" 
         oncut="return false;"
+        @onkeydown:preventDefault="true"
+        @onkeyup:preventDefault="true"
         autocapitalize="none"/>
 </div>
 

src/Web/Avalonia.Web.Blazor/AvaloniaView.razor.cs

@@ -32,10 +32,12 @@ namespace Avalonia.Web.Blazor
         private AvaloniaModule? _avaloniaModule = null;
         private InputHelperInterop? _inputHelper = null;
         private InputHelperInterop? _canvasHelper = null;
+        private InputHelperInterop? _containerHelper = null;
         private NativeControlHostInterop? _nativeControlHost = null;
         private StorageProviderInterop? _storageProvider = null;
         private ElementReference _htmlCanvas;
         private ElementReference _inputElement;
+        private ElementReference _containerElement;
         private ElementReference _nativeControlsContainer;
         private double _dpi = 1;
         private SKSize _canvasSize = new (100, 100);
@@ -247,8 +249,9 @@ namespace Avalonia.Web.Blazor
 
                 _inputHelper = new InputHelperInterop(_avaloniaModule, _inputElement);
                 _canvasHelper = new InputHelperInterop(_avaloniaModule, _htmlCanvas);
+                _containerHelper = new InputHelperInterop(_avaloniaModule, _containerElement);
 
-                _inputHelper.Hide();
+                HideIme();
                 _canvasHelper.SetCursor("default");
                 _topLevelImpl.SetCssCursor = x =>
                 {
@@ -387,6 +390,12 @@ namespace Avalonia.Web.Blazor
             }
         }
 
+        private void HideIme()
+        {
+            _inputHelper?.Hide();
+            _containerHelper?.Focus();
+        }
+
         public void SetClient(ITextInputMethodClient? client)
         {
             if (_inputHelper is null)
@@ -407,7 +416,7 @@ namespace Avalonia.Web.Blazor
             else
             {
                 _inputElementFocused = false;
-                _inputHelper.Hide();
+                HideIme();
             }
         }
 

src/Web/Avalonia.Web.Blazor/Interop/InputHelperInterop.cs

@@ -13,10 +13,10 @@ namespace Avalonia.Web.Blazor.Interop
         private readonly AvaloniaModule _module;
         private readonly ElementReference _inputElement;
 
-        public InputHelperInterop(AvaloniaModule module, ElementReference element)
+        public InputHelperInterop(AvaloniaModule module, ElementReference inputElement)
         {
             _module = module;
-            _inputElement = element;
+            _inputElement = inputElement;
         }
 
         public void Clear() => _module.Invoke(ClearSymbol, _inputElement);

src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/InputHelper.ts

@@ -3,9 +3,18 @@
         inputElement.value = "";
     }
 
-    public static focus(inputElement: HTMLInputElement) {
+    
+    public static isInputElement( element : HTMLInputElement | HTMLElement ) : element is HTMLInputElement {
+        return ( element as HTMLInputElement).setSelectionRange !== undefined;
+    }
+
+    public static focus(inputElement: HTMLElement) {
         inputElement.focus();
-        inputElement.setSelectionRange(0, 0);
+        
+        if(this.isInputElement(inputElement))
+        {
+            (inputElement as HTMLInputElement).setSelectionRange(0,0);
+        }
     }
 
     public static setCursor(inputElement: HTMLInputElement, kind: string) {