[RadioGroup] Fix keyboard selection (microsoft#2663)

* [RadioGroup] Fix keyboard selection

* Fix test

Author: vnbaaij

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

@@ -8047,7 +8047,7 @@
         </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1">
             <summary>
-            Groups child <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1"/> components. 
+            Groups child <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1"/> components.
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1.Orientation">
@@ -8057,7 +8057,7 @@
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1.ChildContent">
             <summary>
-            Gets or sets the child content to be rendering inside the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1"/>. 
+            Gets or sets the child content to be rendering inside the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1"/>.
             </summary>
         </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1.OnParametersSet">

src/Core.Assets/src/index.ts

@@ -109,18 +109,6 @@ export function afterServerStarted(blazor: any) {
 
 export function afterStarted(blazor: Blazor, mode: string) {
 
-  blazor.registerCustomEventType('radiogroupclick', {
-    browserEventName: 'click',
-    createEventArgs: event => {
-      if (event.target!._readOnly || event.target!._disabled) {
-        return null;
-      }
-      return {
-        value: event.target!.value
-      };
-    }
-  });
-
   blazor.registerCustomEventType('checkedchange', {
     browserEventName: 'change',
     createEventArgs: event => {
@@ -182,6 +170,19 @@ export function afterStarted(blazor: Blazor, mode: string) {
       return null;
     }
   });
+
+  blazor.registerCustomEventType('radiogroupchange', {
+    browserEventName: 'change',
+    createEventArgs: event => {
+      if (event.target!.localName == 'fluent-radio-group') {
+        return {
+          value: event.target.value,
+        }
+      };
+      return null;
+    }
+  });
+
   blazor.registerCustomEventType('selectedchange', {
     browserEventName: 'selected-change',
     createEventArgs: event => {

src/Core/Components/Radio/FluentRadioGroup.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentInputBase<TValue>
 @typeparam TValue
 <CascadingValue TValue="FluentRadioContext" Value="_context">
@@ -10,11 +10,10 @@
                         readonly=@ReadOnly
                         disabled=@Disabled
                         name="@_context!.GroupName"
-                        value="@BindConverter.FormatValue(Value?.ToString())"
                         orientation="@Orientation.ToAttributeValue()"
                         required="@Required"
-                        @onradiogroupclick="@((e) => CurrentValueAsString = e?.Value?.ToString())"
+                        @onradiogroupchange="HandleChange"
                         @attributes="AdditionalAttributes">
         @ChildContent
     </fluent-radio-group>
-</CascadingValue>
+</CascadingValue>

src/Core/Components/Radio/FluentRadioGroup.razor.cs

@@ -7,7 +7,7 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 /// <summary>
-/// Groups child <see cref="FluentRadio{TValue}"/> components. 
+/// Groups child <see cref="FluentRadio{TValue}"/> components.
 /// </summary>
 
 [CascadingTypeParameter(nameof(TValue))]
@@ -28,7 +28,7 @@ public FluentRadioGroup()
     public Orientation? Orientation { get; set; }
 
     /// <summary>
-    /// Gets or sets the child content to be rendering inside the <see cref="FluentRadioGroup{TValue}"/>. 
+    /// Gets or sets the child content to be rendering inside the <see cref="FluentRadioGroup{TValue}"/>.
     /// </summary>
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
@@ -62,4 +62,12 @@ protected override void OnParametersSet()
     /// <inheritdoc />
     protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out TValue result, [NotNullWhen(false)] out string? validationErrorMessage)
     => this.TryParseSelectableValueFromString(value, out result, out validationErrorMessage);
+
+    private void HandleChange(ChangeEventArgs e)
+    {
+        if (CurrentValueAsString != e?.Value?.ToString())
+        {
+            CurrentValueAsString = e?.Value?.ToString();
+        }
+    }
 }

src/Core/Events/EventHandlers.cs

@@ -4,7 +4,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 
 [EventHandler("oncheckedchange", typeof(CheckboxChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onswitchcheckedchange", typeof(CheckboxChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
-[EventHandler("onradiogroupclick", typeof(ChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
+[EventHandler("onradiogroupchange", typeof(ChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onsliderchange", typeof(ChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("ontabchange", typeof(TabChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]
 [EventHandler("onselectedchange", typeof(TreeChangeEventArgs), enableStopPropagation: true, enablePreventDefault: true)]

tests/Core/_ToDo/Radio/FluentRadioGroupTests.FluentRadioGroup_Default.verified.html

@@ -1,4 +1,4 @@
 
-<fluent-radio-group id="xxx" name="xxx" value="False" blazor:onradiogroupclick="1" blazor:elementreference="xxx">
+<fluent-radio-group id="xxx" name="xxx" blazor:onradiogroupclick="1" blazor:elementreference="xxx">
   <b>render me</b>
-</fluent-radio-group>
+</fluent-radio-group>