CodeInput Try (#400)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Base/MudBaseInputExtended.cs

@@ -49,6 +49,16 @@ protected MudBaseInputExtended() : base(new DefaultConverter<T>()) { }
         /// <returns></returns>
         protected bool GetReadOnlyState() => ReadOnly || ParentReadOnly;
 
+        /// <summary>
+        /// Fires on input.
+        /// </summary>
+        [Parameter] public EventCallback OnInput { get; set; }
+
+        /// <summary>
+        /// Fires on change.
+        /// </summary>
+        [Parameter] public EventCallback OnChange { get; set; }
+
         /// <summary>
         /// If true, the input will take up the full width of its container.
         /// </summary>

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

@@ -6,8 +6,8 @@
     @for (int i = 0; i < Count; i++)
     {
         int a = i;
-        <MudTextField @ref="_elementReferences[a]" T="T" Class="@InputClassname" Style="@(Margin == Margin.Dense ? "width: 32px" : "width: 42px")" MaxLength="1"
-            @onkeydown="HandleKeyDown" @onfocus="@(() => CheckFocus(a))" @onblur="SetValue"
+        <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>

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

@@ -32,19 +32,19 @@ public MudCodeInput() : base(new DefaultConverter<T>())
 
         private async Task OnValueChanged()
         {
-            await SetValueFromOutside(Value);
+            await SetValueFromOutside(_theValue.Value);
         }
 
-        private void OnCountChanged()
+        private async Task OnCountChanged()
         {
-            if (Count < 0)
+            if (_count.Value < 0)
             {
-                Count = 0;
+                await _count.SetValueAsync(0);
             }
 
-            if (12 < Count)
+            if (12 < _count.Value)
             {
-                Count = 12;
+                await _count.SetValueAsync(12);
             }
         }
 
@@ -65,7 +65,7 @@ private void OnCountChanged()
                 .AddClass(InputClass)
                 .Build();
 
-        private List<MudTextField<T>> _elementReferences = new();
+        private List<MudTextFieldExtended<T>> _elementReferences = new();
 
         /// <summary>
         /// The CSS classes for each input, seperated by space.
@@ -137,6 +137,11 @@ private void OnCountChanged()
         [Category(CategoryTypes.FormComponent.Behavior)]
         public Margin Margin { get; set; }
 
+        private async Task OnInputHandler()
+        {
+            await FocusNext();
+        }
+
         /// <summary>
         /// Protected keydown event.
         /// </summary>
@@ -160,7 +165,7 @@ protected async Task HandleKeyDown(KeyboardEventArgs arg)
                 return;
             }
 
-            if (arg.Key.Length == 1 || arg.Key == "ArrowRight")
+            if (arg.Key == "ArrowRight")
             {
                 await FocusNext();
             }
@@ -183,7 +188,7 @@ protected void CheckFocus(int count)
         /// <returns></returns>
         public async Task FocusNext()
         {
-            if (_lastFocusedIndex >= Count - 1)
+            if (_lastFocusedIndex >= _count.Value - 1)
             {
                 await _elementReferences[_lastFocusedIndex].BlurAsync();
                 await _elementReferences[_lastFocusedIndex].FocusAsync();
@@ -221,7 +226,7 @@ private void SyncReferences()
             _elementReferences.Clear();
             for (int i = 0; i < 12; i++)
             {
-                _elementReferences.Add(new MudTextField<T>());
+                _elementReferences.Add(new MudTextFieldExtended<T>());
             }
         }
 
@@ -232,7 +237,7 @@ private void SyncReferences()
         public async Task SetValue()
         {
             string result =  "";
-            for (int i = 0; i < Count; i++)
+            for (int i = 0; i < _count.Value; i++)
             {
                 var val = _elementReferences[i].Value?.ToString();
                 if (val == null)
@@ -254,12 +259,12 @@ public async Task SetValue()
         public async Task SetValueFromOutside(T? value)
         {
             string? val = Converter.Set(value);
-            if (Count < val?.Length)
+            if (_count.Value < val?.Length)
             {
-                val = val.Substring(0, Count);
+                val = val.Substring(0, _count.Value);
             }
             await _theValue.SetValueAsync(Converter.Get(val));
-            for (int i = 0; i < Count; i++)
+            for (int i = 0; i < _count.Value; i++)
             {
                 if (i < val?.Length)
                 {

CodeBeam.MudBlazor.Extensions/Components/InputExtended/MudInputExtended.razor.cs

@@ -176,16 +176,6 @@ public virtual async Task ForceAutoSize()
         /// </summary>
         [Parameter] public bool AutoSize { get; set; }
 
-        /// <summary>
-        /// Fires on input.
-        /// </summary>
-        [Parameter] public EventCallback OnInput { get; set; }
-
-        /// <summary>
-        /// Fires on change.
-        /// </summary>
-        [Parameter] public EventCallback OnChange { get; set; }
-
         /// <summary>
         /// Paste hook for descendants.
         /// </summary>

CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor

@@ -42,6 +42,7 @@
                                       ErrorId="@ErrorId"
                                       Immediate="@Immediate"
                                       Margin="@Margin"
+                                      OnInput="@OnInput"
                                       OnBlur="@OnBlurredAsync"
                                       OnKeyDown="@InvokeKeyDownAsync"
                                       OnInternalInputChanged="OnChange"