ChipField String Delimiter and AllowSameValues (#421)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/ChipFieldPage.razor

@@ -6,7 +6,7 @@
         <ChipFieldExampleIntro />
     </ExampleCard>
 
-    <ExampleCard ComponentName="ChipField" ExampleName="ChipFieldExample1" Title="Playground" Description="Chip field create chips when user press delimiter key.">
+    <ExampleCard ComponentName="ChipField" ExampleName="ChipFieldExample1" Title="Playground" Description="Chip field create chips when user press delimiter key. Delimiter also accepts longer key names like 'Enter', 'Delete' etc.">
         <ChipFieldExample1 />
     </ExampleCard>
 </ExamplePage>

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

@@ -3,7 +3,7 @@
 <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" />
+            ChipColor="_color" ChipVariant="_chipVariant" ChipSize="_chipSize" WrapChips="_wrapChips" MaxChips="_maxChips" ChipsMaxWidth="_chipsMaxWidth" Closeable="_closeable" Variant="_variant" Label="ChipField" AllowSameValues="@_allowSameValues" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -47,12 +47,13 @@
             <MudSwitchM3 @bind-Value="@_readonly" Label="ReadOnly" Color="Color.Secondary" />
             <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" />
         </MudStack>
     </MudItem>
 </MudGrid>
 
 @code{
-    char _delimiter = ' ';
+    string _delimiter = " ";
     string? _value;
     List<string>? _values;
     int _maxChips = 0;
@@ -66,4 +67,5 @@
     bool _readonly;
     bool _disableRadius;
     bool _closeable = true;
+    bool _allowSameValues = false;
 }

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

@@ -43,6 +43,12 @@ public partial class MudChipField<T> : MudTextFieldExtended<T>
         [Parameter]
         public EventCallback<List<string>> ValuesChanged { get; set; }
 
+        /// <summary>
+        /// If false, pressing delimeter key has no effect if the value is already in values. Default is false.
+        /// </summary>
+        [Parameter]
+        public bool AllowSameValues { get; set; }
+
         /// <summary>
         /// Determines chip size with small, medium or large values.
         /// </summary>
@@ -53,7 +59,7 @@ public partial class MudChipField<T> : MudTextFieldExtended<T>
         /// The char that created a new chip with current value.
         /// </summary>
         [Parameter]
-        public char? Delimiter { get; set; }
+        public string? Delimiter { get; set; } = " ";
 
         /// <summary>
         /// CSS classes of the chips, seperated by space.
@@ -110,9 +116,17 @@ public partial class MudChipField<T> : MudTextFieldExtended<T>
         /// <returns></returns>
         protected async Task HandleKeyDown(KeyboardEventArgs args)
         {
-            var result = args.Code == "Space" ? " " : args.Key;
-            if (result == Delimiter.ToString() && _internalValue != null)
+            var result = args.Key;
+            if (result.Equals(Delimiter, StringComparison.InvariantCultureIgnoreCase) && _internalValue != null)
             {
+                if (AllowSameValues == false && Values?.Contains(Converter.Set(_internalValue)) == true)
+                {
+                    await Task.Delay(10);
+                    _internalValue = Converter.Get(Converter.Set(_internalValue)?.Replace(result, null).ToString());
+                    await SetValueAsync(_internalValue);
+                    StateHasChanged();
+                    return;
+                }
                 await SetChips();
                 StateHasChanged();
             }