CodeInput Changes (#402)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/CodeInput/Examples/CodeInputExample1.razor

@@ -2,8 +2,8 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center" Style="height: 500px">
-        <MudCodeInput @ref="_textFieldGroup" T="string" @bind-Value="@_value" Count="@_count" Spacing="_spacing" Variant="@_variant" Margin="_margin"
-            Disabled="@_disabled" ReadOnly="@_readonly" />
+        <MudCodeInput T="string" @bind-Value="@_value" Count="@_count" Spacing="_spacing" Variant="@_variant" Margin="_margin"
+                      Disabled="@_disabled" ReadOnly="@_readonly" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -30,8 +30,7 @@
     </MudItem>
 </MudGrid>
 
-@code{
-    MudCodeInput<string>? _textFieldGroup;
+@code {
     string? _value;
     int _count = 4;
     int _spacing = 2;

CodeBeam.MudBlazor.Extensions/Components/CodeInput/MudCodeInput.razor

@@ -2,15 +2,19 @@
 @typeparam T
 @inherits MudFormComponent<T, string>
 
-<div class="@Classname" style="@Style">
-    @for (int i = 0; i < Count; i++)
-    {
-        int a = i;
-        <MudTextFieldExtended @ref="_elementReferences[a]" T="T" Class="@InputClassname" Style="@(Margin == Margin.Dense ? "width: 32px" : "width: 42px")" MaxLength="1"
-            @onkeydown="HandleKeyDown" @onfocus="@(() => CheckFocus(a))" @onblur="SetValue" OnInput="OnInputHandler"
-            Variant="@Variant" Margin="@Margin" Disabled="Disabled" ReadOnly="ReadOnly" Immediate="true" InputType="InputType" />
-    }
-</div>
+<MudInputControl Class="@Class" Style="@Style" Error="@Error" ErrorText="@ErrorText" Required="false">
+    <InputContent>
+        <div class="@Classname" style="@InnerStyle">
+            @for (int i = 0; i < Count; i++)
+            {
+                int a = i;
+                <MudTextFieldExtended @ref="_elementReferences[a]" T="T" Class="@InputClassname" Style="@(Margin == Margin.Dense ? "width: 32px" : "width: 42px")" MaxLength="1"
+                                      @onkeydown="HandleKeyDown" @onfocus="@(() => CheckFocus(a))" @onblur="SetValue" OnInput="OnInputHandler" Error="@Error"
+                                      Variant="@Variant" Margin="@Margin" Disabled="Disabled" ReadOnly="ReadOnly" Immediate="true" InputType="InputType" />
+            }
+        </div>
+    </InputContent>
+</MudInputControl>
 
 <style>
     .justify-text-center input {

CodeBeam.MudBlazor.Extensions/Components/CodeInput/MudCodeInput.razor.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using MudBlazor;
+using MudBlazor.Interfaces;
 using MudBlazor.State;
 using MudBlazor.Utilities;
 
@@ -53,7 +54,8 @@ private async Task OnCountChanged()
         /// </summary>
         protected string? Classname =>
            new CssBuilder($"d-flex gap-{Spacing}")
-           .AddClass(Class)
+            .AddClass("mud-code-input-inner")
+           .AddClass(InnerClass)
            .Build();
 
         /// <summary>
@@ -74,6 +76,20 @@ private async Task OnCountChanged()
         [Category(CategoryTypes.FormComponent.Behavior)]
         public string? InputClass { get; set; }
 
+        /// <summary>
+        /// The CSS classes for input container div, seperated by space.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Behavior)]
+        public string? InnerClass { get; set; }
+
+        /// <summary>
+        /// The CSS styles for input container div.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.Behavior)]
+        public string? InnerStyle { get; set; }
+
         /// <summary>
         /// Type of the input element. It should be a valid HTML5 input type.
         /// </summary>
@@ -137,8 +153,15 @@ private async Task OnCountChanged()
         [Category(CategoryTypes.FormComponent.Behavior)]
         public Margin Margin { get; set; }
 
+        bool _skipInputEvent = false;
+        bool _skipRefocus = false;
         private async Task OnInputHandler()
         {
+            if (_skipInputEvent)
+            {
+                _skipInputEvent = false;
+                return;
+            }
             await FocusNext();
         }
 
@@ -154,32 +177,49 @@ protected async Task HandleKeyDown(KeyboardEventArgs arg)
                 return;
             }
 
-            if (RuntimeLocation.IsClientSide)
-            {
-                await Task.Delay(10);
-            }
-            
-            if (arg.Key == "Backspace" || arg.Key == "ArrowLeft")
+            if (arg.Key == "Backspace" || arg.Key == "ArrowLeft" || arg.Key == "Delete")
             {
+                _skipInputEvent = true;
+                _skipRefocus = true;
+                if (arg.Key == "Delete")
+                {
+                    await _elementReferences[_lastFocusedIndex].Clear();
+                    _skipInputEvent = false;
+                }
+                if (RuntimeLocation.IsClientSide)
+                {
+                    await Task.Delay(10);
+                }
                 await FocusPrevious();
                 return;
             }
 
             if (arg.Key == "ArrowRight")
             {
+                if (RuntimeLocation.IsClientSide)
+                {
+                    await Task.Delay(10);
+                }
                 await FocusNext();
             }
-            
+
         }
 
         private int _lastFocusedIndex = 0;
         /// <summary>
         /// 
         /// </summary>
         /// <param name="count"></param>
-        protected void CheckFocus(int count)
+        protected async Task CheckFocus(int count)
         {
             _lastFocusedIndex = count;
+            if (_skipRefocus == true)
+            {
+                _skipRefocus = false;
+                return;
+            }
+            string str = Converter.Set(_theValue.Value) ?? string.Empty;
+            await _elementReferences[str.Length].FocusAsync();
         }
 
         /// <summary>
@@ -236,7 +276,7 @@ private void SyncReferences()
         /// <returns></returns>
         public async Task SetValue()
         {
-            string result =  "";
+            string result = "";
             for (int i = 0; i < _count.Value; i++)
             {
                 var val = _elementReferences[i].Value?.ToString();