[KeyCode] Add a new StopRepeat property

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -5196,6 +5196,11 @@
             its default action should not be taken as it normally would be.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.StopRepeat">
+            <summary>
+            Gets or sets whether the key pressed can be repeated.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.AdditionalAttributes">
             <summary>
             Gets or sets a collection of additional attributes that will be applied to the created element.
@@ -5204,7 +5209,7 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnAfterRenderAsync(System.Boolean)">
             <summary />
         </member>
-        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnKeyDownRaisedAsync(System.Int32,System.String,System.Boolean,System.Boolean,System.Boolean,System.Boolean,System.Int32,System.String)">
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnKeyDownRaisedAsync(System.Int32,System.String,System.Boolean,System.Boolean,System.Boolean,System.Boolean,System.Int32,System.String,System.Boolean)">
             <summary>
             Internal method.
             </summary>
@@ -5218,7 +5223,7 @@
             <param name="targetId"></param>
             <returns></returns>
         </member>
-        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnKeyUpRaisedAsync(System.Int32,System.String,System.Boolean,System.Boolean,System.Boolean,System.Boolean,System.Int32,System.String)">
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnKeyUpRaisedAsync(System.Int32,System.String,System.Boolean,System.Boolean,System.Boolean,System.Boolean,System.Int32,System.String,System.Boolean)">
             <summary>
             Internal method.
             </summary>
@@ -5284,6 +5289,11 @@
             Gets the identifier of the targeted DOM element.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs.Repeat">
+            <summary>
+            Gets a boolean value that is true if the given key is being held down such that it is automatically repeating.
+            </summary>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs.ToString">
             <summary>
             Returns a string that represents the key pressed.

examples/Demo/Shared/Pages/KeyCode/Examples/KeyCodeExample.razor

@@ -46,6 +46,7 @@
         </li>
         <li><span>Location:</span> <code>@LastKeyCode?.Location.ToString()</code></li>
         <li><span>TargetId:</span> <code>@LastKeyCode?.TargetId</code></li>
+        <li><span>Repeat:</span> <code>@LastKeyCode?.Repeat</code></li>
     </ul>
 </FluentStack>
 

examples/Demo/Shared/Pages/KeyCode/Examples/KeyCodeGlobalExample.razor

@@ -1,10 +1,14 @@
 @inject IKeyCodeService KeyCodeService
 @implements IAsyncDisposable
 
-<FluentSwitch @bind-Value="@IncludeKeyUp"
-              CheckedMessage="KeyDown and KeyUp"
-              UncheckedMessage="KeyDown only"
-              Style="margin-bottom: 10px;" />
+<FluentStack Style="margin-bottom: 10px;">
+    <FluentSwitch @bind-Value="@IncludeKeyUp"
+                  CheckedMessage="KeyDown and KeyUp"
+                  UncheckedMessage="KeyDown only" />
+    <FluentSwitch @bind-Value="@StopRepeat"
+                  CheckedMessage="Stop Repeat"
+                  UncheckedMessage="Allow Repeat" />
+</FluentStack>
 
 <FluentCard>
     @if (!KeyPressed.Any())
@@ -21,6 +25,7 @@
 @code
 {
     private bool IncludeKeyUp = false;
+    private bool StopRepeat = false;
     private List<(string Key, string Event)> KeyPressed = new();
 
     protected override void OnInitialized()
@@ -36,6 +41,11 @@
             return Task.CompletedTask;
         }
 
+        if (StopRepeat && args.Repeat)
+        {
+            return Task.CompletedTask;
+        }
+
         KeyPressed.Add((args.ToString(), args.Name));
         StateHasChanged();
         return Task.CompletedTask;

src/Core/Components/KeyCode/FluentKeyCode.razor.cs

@@ -103,6 +103,12 @@ public partial class FluentKeyCode : IAsyncDisposable
     [Parameter]
     public KeyCode[] PreventDefaultOnly { get; set; } = Array.Empty<KeyCode>();
 
+    /// <summary>
+    /// Gets or sets whether the key pressed can be repeated.
+    /// </summary>
+    [Parameter]
+    public bool StopRepeat { get; set; }
+
     /// <summary>
     /// Gets or sets a collection of additional attributes that will be applied to the created element.
     /// </summary>
@@ -128,7 +134,7 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
                 OnKeyUp.HasDelegate ? "KeyUp" : string.Empty,
             });
 
-            _javaScriptEventId = await _jsModule.InvokeAsync<string>("RegisterKeyCode", GlobalDocument, eventNames.Length > 1 ? eventNames : "KeyDown", Anchor, ChildContent is null ? null : Element, Only, IgnoreModifier ? Ignore.Union(_Modifiers) : Ignore, StopPropagation, PreventDefault, PreventDefaultOnly, _dotNetHelper, PreventMultipleKeyDown);
+            _javaScriptEventId = await _jsModule.InvokeAsync<string>("RegisterKeyCode", GlobalDocument, eventNames.Length > 1 ? eventNames : "KeyDown", Anchor, ChildContent is null ? null : Element, Only, IgnoreModifier ? Ignore.Union(_Modifiers) : Ignore, StopPropagation, PreventDefault, PreventDefaultOnly, _dotNetHelper, PreventMultipleKeyDown, StopRepeat);
         }
     }
 
@@ -145,11 +151,11 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
     /// <param name="targetId"></param>
     /// <returns></returns>
     [JSInvokable]
-    public async Task OnKeyDownRaisedAsync(int keyCode, string value, bool ctrlKey, bool shiftKey, bool altKey, bool metaKey, int location, string targetId)
+    public async Task OnKeyDownRaisedAsync(int keyCode, string value, bool ctrlKey, bool shiftKey, bool altKey, bool metaKey, int location, string targetId, bool repeat)
     {
         if (OnKeyDown.HasDelegate)
         {
-            await OnKeyDown.InvokeAsync(FluentKeyCodeEventArgs.Instance("keydown", keyCode, value, ctrlKey, shiftKey, altKey, metaKey, location, targetId));
+            await OnKeyDown.InvokeAsync(FluentKeyCodeEventArgs.Instance("keydown", keyCode, value, ctrlKey, shiftKey, altKey, metaKey, location, targetId, repeat));
         }
     }
 
@@ -166,11 +172,11 @@ public async Task OnKeyDownRaisedAsync(int keyCode, string value, bool ctrlKey,
     /// <param name="targetId"></param>
     /// <returns></returns>
     [JSInvokable]
-    public async Task OnKeyUpRaisedAsync(int keyCode, string value, bool ctrlKey, bool shiftKey, bool altKey, bool metaKey, int location, string targetId)
+    public async Task OnKeyUpRaisedAsync(int keyCode, string value, bool ctrlKey, bool shiftKey, bool altKey, bool metaKey, int location, string targetId, bool repeat)
     {
         if (OnKeyUp.HasDelegate)
         {
-            await OnKeyUp.InvokeAsync(FluentKeyCodeEventArgs.Instance("keyup", keyCode, value, ctrlKey, shiftKey, altKey, metaKey, location, targetId));
+            await OnKeyUp.InvokeAsync(FluentKeyCodeEventArgs.Instance("keyup", keyCode, value, ctrlKey, shiftKey, altKey, metaKey, location, targetId, repeat));
         }
     }
 

src/Core/Components/KeyCode/FluentKeyCode.razor.js

@@ -1,4 +1,4 @@
-export function RegisterKeyCode(globalDocument, eventNames, id, elementRef, onlyCodes, excludeCodes, stopPropagation, preventDefault, preventDefaultOnly, dotNetHelper, preventMultipleKeydown) {
+export function RegisterKeyCode(globalDocument, eventNames, id, elementRef, onlyCodes, excludeCodes, stopPropagation, preventDefault, preventDefaultOnly, dotNetHelper, preventMultipleKeydown, stopRepeat) {
     const element = globalDocument
                   ? document
                   : elementRef == null ? document.getElementById(id) : elementRef;
@@ -27,6 +27,10 @@ export function RegisterKeyCode(globalDocument, eventNames, id, elementRef, only
         const handler = function (e, netMethod) {
             const keyCode = e.which || e.keyCode || e.charCode;
 
+            if (stopRepeat && e.repeat) {
+                return;
+            }
+
             if (!!dotNetHelper && !!dotNetHelper.invokeMethodAsync) {
 
                 const targetId = e.currentTarget?.id ?? "";
@@ -52,7 +56,7 @@ export function RegisterKeyCode(globalDocument, eventNames, id, elementRef, only
                     if (isStopPropagation) {
                         e.stopPropagation();
                     }
-                    dotNetHelper.invokeMethodAsync(netMethod, keyCode, e.key, e.ctrlKey, e.shiftKey, e.altKey, e.metaKey, e.location, targetId);
+                    dotNetHelper.invokeMethodAsync(netMethod, keyCode, e.key, e.ctrlKey, e.shiftKey, e.altKey, e.metaKey, e.location, targetId, e.repeat);
                     return;
                 }
             }

src/Core/Components/KeyCode/FluentKeyCodeEventArgs.cs

@@ -2,7 +2,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public class FluentKeyCodeEventArgs
 {
-    internal static FluentKeyCodeEventArgs Instance(string name, int keyCode, string value, bool ctrlKey, bool shiftKey, bool altKey, bool metaKey, int location, string targetId)
+    internal static FluentKeyCodeEventArgs Instance(string name, int keyCode, string value, bool ctrlKey, bool shiftKey, bool altKey, bool metaKey, int location, string targetId, bool repeat)
     {
         return new FluentKeyCodeEventArgs
         {
@@ -16,6 +16,7 @@ internal static FluentKeyCodeEventArgs Instance(string name, int keyCode, string
             AltKey = altKey,
             MetaKey = metaKey,
             TargetId = targetId,
+            Repeat = repeat
         };
     }
 
@@ -71,6 +72,11 @@ internal static FluentKeyCodeEventArgs Instance(string name, int keyCode, string
     /// </summary>
     public string TargetId { get; init; } = string.Empty;
 
+    /// <summary>
+    /// Gets a boolean value that is true if the given key is being held down such that it is automatically repeating.
+    /// </summary>
+    public bool Repeat { get; init; } = false;
+
     /// <summary>
     /// Returns a string that represents the key pressed.
     /// Example: "Ctrl + Shift + A"

tests/Core/KeyCodeProvider/FluentKeyCodeTests.razor

@@ -16,7 +16,7 @@
         // Arrange && Act
         var cut = Render(@<div id="myZone"><FluentKeyCode Anchor="myZone" OnKeyDown="@(e => pressed = e)" /></div>);
 
-        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", false, false, false, false, 0, "myZone");
+        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", false, false, false, false, 0, "myZone", false);
 
         // Assert
         Assert.Equal(65, pressed.KeyCode);
@@ -37,7 +37,7 @@
         // Arrange && Act
         var cut = Render(@<div id="myZone"><FluentKeyCode Anchor="myZone" OnKeyUp="@(e => pressed = e)" /></div>);
 
-        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyUpRaisedAsync(65, "A", false, false, false, false, 0, "myZone");
+        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyUpRaisedAsync(65, "A", false, false, false, false, 0, "myZone", false);
 
         // Assert
         Assert.Equal(65, pressed.KeyCode);
@@ -51,7 +51,7 @@
         // Arrange && Act
         var cut = Render(@<FluentKeyCode OnKeyDown="@(e => pressed = e)">Hello World</FluentKeyCode>);
 
-        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", false, false, false, false, 0, "myZone");
+        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", false, false, false, false, 0, "myZone", false);
 
         // Assert
         Assert.Equal(65, pressed.KeyCode);
@@ -72,7 +72,7 @@
         // Arrange && Act
         var cut = Render(@<div id="myZone"><FluentKeyCode Anchor="myZone" OnKeyDown="@(e => pressed = e)" /></div>);
 
-        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", true, true, true, true, 0, "myZone");
+        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", true, true, true, true, 0, "myZone", false);
 
         // Assert
         Assert.Equal(65, pressed.KeyCode);
@@ -99,7 +99,7 @@
         // Arrange && Act
         var cut = Render(@<div id="myZone"><FluentKeyCode Anchor="myZone" OnKeyDown="@(e => pressed = e)" /></div>);
 
-        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", ctrlKey, shiftKey, altKey, metaKey, 0, "myZone");
+        await cut.FindComponent<FluentKeyCode>().Instance.OnKeyDownRaisedAsync(65, "A", ctrlKey, shiftKey, altKey, metaKey, 0, "myZone", false);
 
         // Assert
         Assert.Equal(expected, pressed.ToString());

tests/Core/List/FluentAutocompleteTests.razor

@@ -433,7 +433,7 @@
         await cut.InvokeAsync(async () => await cut.FindComponents<FluentKeyCode>()
                                    .ElementAt(popoverOpened ? 1 : 0)
                                    .Instance
-                                   .OnKeyDownRaisedAsync((int)key, string.Empty, false, false, false, false, 0, string.Empty));
+                                   .OnKeyDownRaisedAsync((int)key, string.Empty, false, false, false, false, 0, string.Empty, false));
     }
 
     // Search customers