Auto-focus create skill modal name field

RpgRoller/Components/Pages/HomeControls/CharacterPanel.razor

@@ -268,6 +268,7 @@
 
 <SkillFormModal
     Visible="ShowCreateSkillModal"
+    AutoFocusName="true"
     IsD6="IsD6"
     Title="Create Skill"
     SubmitLabel="Create Skill"

RpgRoller/Components/Pages/HomeControls/SkillFormModal.razor

@@ -9,7 +9,7 @@
             }
             <form class="form-grid" @onsubmit="SubmitAsync" @onsubmit:preventDefault>
                 <label for="@NameInputId">Skill name</label>
-                <input id="@NameInputId" @bind="FormState.Model.Name" @bind:event="oninput"/>
+                <input id="@NameInputId" @ref="NameInputElement" @bind="FormState.Model.Name" @bind:event="oninput"/>
                 @if (FormState.Errors.TryGetValue("name", out var skillNameError))
                 {
                     <p class="field-error">@skillNameError</p>

RpgRoller/Components/Pages/HomeControls/SkillFormModal.razor.cs

@@ -1,5 +1,6 @@
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using RpgRoller.Contracts;
 
 namespace RpgRoller.Components.Pages.HomeControls;
@@ -19,6 +20,16 @@ public partial class SkillFormModal
         FormState.Model.AllowFumble = InitialModel.AllowFumble;
         FormState.ResetValidation();
         AppliedFormVersion = FormVersion;
+        PendingNameFocus = AutoFocusName;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!Visible || !PendingNameFocus)
+            return;
+
+        PendingNameFocus = false;
+        await NameInputElement.FocusAsync();
     }
 
     private async Task SubmitAsync()
@@ -86,6 +97,8 @@ public partial class SkillFormModal
     private FormState<SkillFormModel> FormState { get; } = new();
     private int AppliedFormVersion { get; set; } = -1;
     private bool IsSubmitting { get; set; }
+    private bool PendingNameFocus { get; set; }
+    private ElementReference NameInputElement { get; set; }
 
     [Parameter]
     public bool Visible { get; set; }
@@ -132,6 +145,9 @@ public partial class SkillFormModal
     [Parameter]
     public bool IsMutating { get; set; }
 
+    [Parameter]
+    public bool AutoFocusName { get; set; }
+
     [Parameter]
     public EventCallback<Guid> SkillSaved { get; set; }