From e9fc5fe9ac817a4b975f3b1d7299746741901e46 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 21 Sep 2022 12:46:13 +0100
Subject: [PATCH] make input box size to the surrounding text and position
 correctly.

---
 .../Avalonia.Web.Blazor/AvaloniaView.razor    |  4 ++--
 .../webapp/modules/Avalonia/InputHelper.ts    | 20 +++++++++----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/Web/Avalonia.Web.Blazor/AvaloniaView.razor b/src/Web/Avalonia.Web.Blazor/AvaloniaView.razor
index 180c090c03..caaf0af20e 100644
--- a/src/Web/Avalonia.Web.Blazor/AvaloniaView.razor
+++ b/src/Web/Avalonia.Web.Blazor/AvaloniaView.razor
@@ -48,11 +48,11 @@
 }
 
 #inputElement {
+    padding: 0;
+    margin: 0;
     opacity: 0.5;
     position: absolute;
     height: 20px;
-    top: 0px;
-    left: 0px;
     z-index: 1000;
     overflow: hidden;
 }
diff --git a/src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/InputHelper.ts b/src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/InputHelper.ts
index 15170c170a..1ea85d84e3 100644
--- a/src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/InputHelper.ts
+++ b/src/Web/Avalonia.Web.Blazor/webapp/modules/Avalonia/InputHelper.ts
@@ -22,24 +22,20 @@ export class InputHelper {
     }
     public static focus(inputElement: HTMLInputElement) {
         inputElement.focus();
-        inputElement.setSelectionRange(0,0);
     }
 
     public static setCursor(inputElement: HTMLInputElement, kind: string) {
         inputElement.style.cursor = kind;
     }
     
-    public static setBounds(inputElement: HTMLInputElement, x: number, y: number, width: number, height: number, caret: number)
-    {
-        if(inputElement.selectionStart) {
-            inputElement.style.left = (x).toFixed(0) + "px";
-            inputElement.style.top = (y).toFixed(0) + "px";
-
-            let {height, left, top} = CaretHelper.getCaretCoordinates(inputElement, caret);
+    public static setBounds(inputElement: HTMLInputElement, x: number, y: number, caretWidth: number, caretHeight: number, caret: number) {
+        inputElement.style.left = (x).toFixed(0) + "px";
+        inputElement.style.top = (y).toFixed(0) + "px";
+        
+        let {height, left, top} = CaretHelper.getCaretCoordinates(inputElement, caret);
 
-            inputElement.style.left = (x - left).toFixed(0) + "px";
-            inputElement.style.top = (y - top).toFixed(0) + "px";
-        }
+        inputElement.style.left = (x - left).toFixed(0) + "px";
+        inputElement.style.top = (y - top).toFixed(0) + "px";
     }
 
     public static hide(inputElement: HTMLInputElement) {
@@ -57,6 +53,8 @@ export class InputHelper {
 
         inputElement.value = text;
         inputElement.setSelectionRange(start, end);
+        inputElement.style.width = "20px";
+        inputElement.style.width = inputElement.scrollWidth + "px";
     }
 
     private static onCompositionEvent(ev: CompositionEvent)