ChipField Control Backspace Behavior (#443)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/Examples/ChipFieldExample1.razor

@@ -2,8 +2,9 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex flex-column gap-8 align-center justify-center">
-        <MudChipField T="string" @bind-Value="_value" @bind-Values="_values" StyleChip="@(_disableRadius ? "border-radius: 0 !important" : null)" Delimiter="@_delimiter" FullWidth="true" Disabled="_disabled" ReadOnly="_readonly"
-            ChipColor="_color" ChipVariant="_chipVariant" ChipSize="_chipSize" WrapChips="_wrapChips" MaxChips="_maxChips" ChipsMaxWidth="_chipsMaxWidth" Closeable="_closeable" Variant="_variant" Label="ChipField" AllowSameValues="@_allowSameValues" />
+        <MudChipField @ref="_chipField" T="string" @bind-Value="_value" @bind-Values="_values" StyleChip="@(_disableRadius ? "border-radius: 0 !important" : null)" Delimiter="@_delimiter" FullWidth="true"
+                      Disabled="_disabled" ReadOnly="_readonly" ChipColor="_color" ChipVariant="_chipVariant" ChipSize="_chipSize" WrapChips="_wrapChips" BackspaceChipRemoval="@_backspaceChipRemoval"
+                      MaxChips="_maxChips" ChipsMaxWidth="_chipsMaxWidth" Closeable="_closeable" Variant="_variant" Label="ChipField" AllowSameValues="@_allowSameValues" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -48,11 +49,14 @@
             <MudSwitchM3 @bind-Value="@_disableRadius" Label="Disable Border Radius" Color="Color.Secondary" />
             <MudSwitchM3 @bind-Value="@_closeable" Label="Closeable" Color="Color.Secondary" />
             <MudSwitchM3 @bind-Value="@_allowSameValues" Label="Allow Same Values" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="@_backspaceChipRemoval" Label="Backspace Chip Removal" Color="Color.Secondary" />
+            <MudButton Color="Color.Secondary" Variant="Variant. Outlined" OnClick="@(async() => await _chipField.ClearTextField())">Clear Text Field</MudButton>
         </MudStack>
     </MudItem>
 </MudGrid>
 
 @code{
+    MudChipField<string> _chipField = new();
     string _delimiter = " ";
     string? _value;
     List<string>? _values;
@@ -68,4 +72,5 @@
     bool _disableRadius;
     bool _closeable = true;
     bool _allowSameValues = false;
+    bool _backspaceChipRemoval = true;
 }

CodeBeam.MudBlazor.Extensions/Components/ChipField/MudChipField.razor.cs

@@ -97,6 +97,12 @@ public partial class MudChipField<T> : MudTextFieldExtended<T>
         [Parameter]
         public bool Closeable { get; set; } = true;
 
+        /// <summary>
+        /// Removes last created chip value when press Backspace. Default is true.
+        /// </summary>
+        [Parameter]
+        public bool BackspaceChipRemoval { get; set; } = true;
+
         /// <summary>
         /// Maximum chip count. Set 0 to unlimited. Default is 0.
         /// </summary>
@@ -119,7 +125,7 @@ protected async Task HandleKeyDown(KeyboardEventArgs args)
             var result = args.Key;
             if (result.Equals(Delimiter, StringComparison.InvariantCultureIgnoreCase) && _internalValue != null)
             {
-                if (AllowSameValues == false && Values?.Contains(Converter.Set(_internalValue)) == true)
+                if (AllowSameValues == false && Values?.Contains(Converter.Set(_internalValue) ?? string.Empty) == true)
                 {
                     await Task.Delay(10);
                     _internalValue = Converter.Get(Converter.Set(_internalValue)?.Replace(result, null).ToString());
@@ -131,7 +137,7 @@ protected async Task HandleKeyDown(KeyboardEventArgs args)
                 StateHasChanged();
             }
 
-            if (args.Key == "Backspace" && string.IsNullOrEmpty(Converter.Set(_internalValue)) && Values != null && Values.Any())
+            if (args.Key == "Backspace" && string.IsNullOrEmpty(Converter.Set(_internalValue)) && Values != null && Values.Any() && BackspaceChipRemoval == true)
             {
                 Values.RemoveAt(Values.Count - 1);
                 await ValuesChanged.InvokeAsync(Values);