OK x focus pagina scanner

REMAN/REMAN/JsFunctions.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace REMAN
+{
+    public static class JsFunctions
+    {
+        public static async Task FocusAsync(this ElementReference elementRef, IJSRuntime jsRuntime)
+        {
+            await jsRuntime.InvokeVoidAsync("Js.focus", elementRef);
+        }
+    }
+}

REMAN/REMAN/Pages/PickUp.razor

@@ -4,6 +4,7 @@
 @using NKC.Data.DbModels
 @using REMAN.Components
 @using REMAN.Data
+@using static JsFunctions
 
 @inject AuthenticationStateProvider AuthStateProvider
 @inject IJSRuntime JSRuntime
@@ -11,6 +12,7 @@
 
 <PageTitle>PickUp</PageTitle>
 
+
 <div class="card">
     <div class="card-header table-primary pb-0 mb-0">
         <div class="d-flex justify-content-between">
@@ -28,7 +30,7 @@
     <div class="card-body p-1">
         <div class="row">
             <div class="col-12 form-group">
-                <input @bind="@inputValue" class="form-control"></input>
+                <input @ref="CodeInput" @bind="@inputValue" class="form-control" autofocus="true"></input>
             </div>
             @if (!string.IsNullOrEmpty(lastCmd))
             {
@@ -39,11 +41,15 @@
             <div class="col-12">
                 @if (!string.IsNullOrEmpty(alertMessage))
                 {
-                    <div class="alert alert-danger text-center">@alertMsg</div>
+                    <div class="alert alert-danger text-center fade show">
+                        @alertMsg
+                    </div>
                 }
                 @if (!string.IsNullOrEmpty(lastMessage))
                 {
-                    <div class="alert alert-success text-center">@lastMsg</div>
+                    <div class="alert alert-success text-center fade show">
+                        @lastMsg
+                    </div>
                 }
             </div>
         </div>
@@ -52,6 +58,8 @@
 
 @code {
 
+    private ElementReference CodeInput;
+
     private bool processing = false;
     private string alertMessage = "";
     private string lastMessage = "";
@@ -89,6 +97,19 @@
         await ReloadData();
     }
 
+    protected async override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await SetFocusAsync();
+        }
+    }
+
+    public async Task SetFocusAsync()
+    {
+        await CodeInput.FocusAsync(JSRuntime);
+    }
+
     protected async Task processInput(string inputVal)
     {
         inputVal = inputVal.Trim();
@@ -105,10 +126,21 @@
         else
         {
             alertMessage = $"Error: code {inputVal} not valid / not found";
+            lastCmd = "";
+            await waitResetAlerts();
         }
         processing = false;
     }
 
+    private async Task waitResetAlerts()
+    {
+        //await Task.Delay(1);
+        //await InvokeAsync(StateHasChanged);
+        //await Task.Delay(1);
+        //await Task.Delay(3000);
+        //await ReloadData();
+    }
+
     private async Task ReloadData()
     {
         currRecord = null;
@@ -116,6 +148,7 @@
         lastMessage = "";
         lastCmd = "";
         await Task.Delay(1);
+        //await Focus("CodeInput");
     }
 
     protected string currUserId

REMAN/REMAN/Pages/_Host.cshtml

@@ -6,3 +6,4 @@
 }
 
 <component type="typeof(App)" render-mode="ServerPrerendered" />
+<script src="js/blazorSupport.js"></script>

REMAN/REMAN/wwwroot/js/blazorSupport.js

@@ -0,0 +1,5 @@
+window.Js = {
+    focus: function (element) {
+        setTimeout(() => { element.focus(); }, 250);
+    }
+}