Add reset by keyboard option to Rating (#3073)

Co-authored-by: Denis Voituron <[email protected]>
microsoft · Dec 23, 2024 · 40a321c · 40a321c
1 parent b189dc3
commit 40a321c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/examples/Demo/Shared/Pages/Rating/Examples/RatingDefault.razor b/examples/Demo/Shared/Pages/Rating/Examples/RatingDefault.razor
@@ -3,7 +3,8 @@
     <FluentRating Max="5"
                   Label="Rate me!"
                   @bind-Value="@SelectedValue"
-                  OnHoverValueChanged="@(i => HoverValue = i)" />
+                  OnHoverValueChanged="@(i => HoverValue = i)"
+                  AllowReset="true"/>
     <FluentLabel>@LabelText</FluentLabel>
 </FluentStack>
 

diff --git a/src/Core/Components/Rating/FluentRating.razor b/src/Core/Components/Rating/FluentRating.razor
@@ -29,7 +29,8 @@
         {
             <input type="radio" checked="@(index == Value)" name="@GroupName"
                    value="@index"
-                   @onfocus="@(() => OnClickAsync(index, fromFocus: true))" />
+                   @onfocus="@(() => OnClickAsync(index, fromFocus: true))"
+                   @onkeydown="@OnKeyDownAsync" />
 
             <FluentIcon Value="@GetIcon(index)"
                         Width="@IconWidth"

diff --git a/src/Core/Components/Rating/FluentRating.razor.cs b/src/Core/Components/Rating/FluentRating.razor.cs
@@ -1,7 +1,12 @@
-using Microsoft.AspNetCore.Components;
-using Microsoft.FluentUI.AspNetCore.Components.Utilities;
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
 using System.Diagnostics.CodeAnalysis;
 using System.Globalization;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.FluentUI.AspNetCore.Components.Utilities;
 
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
@@ -109,6 +114,15 @@ private async Task OnClickAsync(int value, bool fromFocus = false)
         }
     }
 
+    private async Task OnKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (AllowReset && args.Key == " ")
+        {
+            await SetCurrentValueAsync(0);
+            await UpdateHoverValueAsync(null);
+        }
+    }
+
     /// <summary />
     private async Task OnMouseEnterAsync(int value)
     {