#464 - Fix focus in expense create dialog

maraf · Jun 14, 2023 · 2c6da8c · 2c6da8c
1 parent 0ea5012
commit 2c6da8c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/src/Money.Blazor.Host/Components/OutcomeCreate.razor b/src/Money.Blazor.Host/Components/OutcomeCreate.razor
@@ -56,16 +56,16 @@
         }
         <Validation ErrorMessages="@ErrorMessages" />
         <div class="form-group">
-            <label for="expense-amount">Amount:</label>
-            <AmountBox Id="expense-amount" AutoFocus="true" AutoSelect="true" @bind-Value="Amount" />
+            <label for="@(IdPrefix + "expense-amount")">Amount:</label>
+            <AmountBox Id="@(IdPrefix + "expense-amount")" AutoSelect="true" @bind-Value="Amount" />
         </div>
         <div class="form-group">
-            <label for="expense-description">Description:</label>
-            <input type="text" class="form-control" id="expense-description" @bind="Description" />
+            <label for="@(IdPrefix + "expense-description")">Description:</label>
+            <input type="text" class="form-control" id="@(IdPrefix + "expense-description")" @bind="Description" />
         </div>
         <div class="form-group">
-            <label for="expense-when">When:</label>
-            <DateBox Id="expense-when" @bind-Value="When" />
+            <label for="@(IdPrefix + "expense-when")">When:</label>
+            <DateBox Id="@(IdPrefix + "expense-when")" @bind-Value="When" />
         </div>
         <div class="form-group">
             <label>Category:</label>
@@ -76,7 +76,7 @@
                 <div class="form-row">
                     @foreach (var category in Categories)
                     {
-                        var buttonId = isFistCategory ? "expense-category-first" : null;
+                        var buttonId = isFistCategory ? IdPrefix + "expense-category-first" : null;
                         isFistCategory = false;
 
                         <div class="col-6 col-md-4 mb-2">

diff --git a/src/Money.Blazor.Host/Components/OutcomeCreate.razor.cs b/src/Money.Blazor.Host/Components/OutcomeCreate.razor.cs
@@ -20,6 +20,10 @@ namespace Money.Components
 {
     public partial class OutcomeCreate : System.IDisposable
     {
+        private static int instanceCounter = 0;
+
+        private string IdPrefix = $"expensecreate{++instanceCounter}-";
+
         [Inject]
         protected ICommandDispatcher Commands { get; set; }
 
@@ -111,17 +115,35 @@ private async Task<bool> Validate(List<string> messages)
             Log.Debug($"Expense: Amount: {Amount}, Category: {CategoryKey}, When: {When}.");
 
             messages.Clear();
+            bool areMessagesEmpty = messages.Count == 0;
             bool isInvalidAmount = Validator.AddOutcomeAmount(messages, Amount?.Value ?? 0);
-            if (messages.Count == 0 && isInvalidAmount)
+            if (areMessagesEmpty && isInvalidAmount)
+            {
+                Log.Debug("Focus expense-amount");
                 await FocusElementAsync("expense-amount");
+            }
 
+            areMessagesEmpty = messages.Count == 0;
             bool isInvalidDescription = Validator.AddOutcomeDescription(messages, Description);
-            if (messages.Count == 0 && isInvalidDescription)
+            if (areMessagesEmpty && isInvalidDescription)
+            {
+                Log.Debug("Focus expense-description");
                 await FocusElementAsync("expense-description");
+            }
 
+            areMessagesEmpty = messages.Count == 0;
             bool isInvalidCategory = Validator.AddOutcomeCategoryKey(messages, CategoryKey);
-            if (messages.Count == 0 && isInvalidCategory)
+            if (areMessagesEmpty && isInvalidCategory)
+            {
+                Log.Debug("Focus expense-category-first");
                 await FocusElementAsync("expense-category-first");
+            }
+
+            if (messages.Count == 0)
+            {
+                Log.Debug("Focus fallback expense-amount");
+                await FocusElementAsync("expense-amount");
+            }
 
             //Validator.AddOutcomeCurrency(messages, Amount?.Currency);
 
@@ -130,7 +152,7 @@ private async Task<bool> Validate(List<string> messages)
         }
 
         private Task FocusElementAsync(string id) 
-            => Interop.FocusElementByIdAsync(id);
+            => Interop.FocusElementByIdAsync(IdPrefix + id);
 
         private async void Execute()
         {
@@ -161,6 +183,8 @@ public async void Show(IKey categoryKey)
 
             AreTemplatesOpened = false;
             StateHasChanged();
+
+            _ = FocusOnShowAsync();
         }
 
         public void Show(Price amount, string description, IKey categoryKey, bool isFixed)
@@ -172,6 +196,13 @@ public void Show(Price amount, string description, IKey categoryKey, bool isFixe
             Show(categoryKey);
         }
 
+        private async Task FocusOnShowAsync()
+        {
+            Log.Debug("Delay 500");
+            await Task.Delay(500);
+            await Validate(new List<string>());
+        }
+
         public override void Show()
             => Show(KeyFactory.Empty(typeof(Category)));