Make InputRadioGroup preserve child elements (#40148)

Author: SteveSandersonMS

src/Components/Web/src/Forms/AttributeUtilities.cs

@@ -7,7 +7,7 @@ namespace Microsoft.AspNetCore.Components.Forms;
 
 internal static class AttributeUtilities
 {
-    public static string CombineClassNames(IReadOnlyDictionary<string, object>? additionalAttributes, string classNames)
+    public static string? CombineClassNames(IReadOnlyDictionary<string, object>? additionalAttributes, string? classNames)
     {
         if (additionalAttributes is null || !additionalAttributes.TryGetValue("class", out var @class))
         {

src/Components/Web/src/Forms/InputBase.cs

@@ -165,8 +165,8 @@ protected string CssClass
     {
         get
         {
-            var fieldClass = EditContext?.FieldCssClass(FieldIdentifier) ?? string.Empty;
-            return AttributeUtilities.CombineClassNames(AdditionalAttributes, fieldClass);
+            var fieldClass = EditContext?.FieldCssClass(FieldIdentifier);
+            return AttributeUtilities.CombineClassNames(AdditionalAttributes, fieldClass) ?? string.Empty;
         }
     }
 

src/Components/Web/src/Forms/InputRadioContext.cs

@@ -6,50 +6,24 @@ namespace Microsoft.AspNetCore.Components.Forms;
 /// <summary>
 /// Describes context for an <see cref="InputRadio{TValue}"/> component.
 /// </summary>
-internal class InputRadioContext
+internal sealed class InputRadioContext
 {
-    private readonly InputRadioContext? _parentContext;
-
-    /// <summary>
-    /// Gets the name of the input radio group.
-    /// </summary>
-    public string GroupName { get; }
-
-    /// <summary>
-    /// Gets the current selected value in the input radio group.
-    /// </summary>
-    public object? CurrentValue { get; }
-
-    /// <summary>
-    /// Gets a css class indicating the validation state of input radio elements.
-    /// </summary>
-    public string FieldClass { get; }
-
-    /// <summary>
-    /// Gets the event callback to be invoked when the selected value is changed.
-    /// </summary>
+    public InputRadioContext? ParentContext { get; }
     public EventCallback<ChangeEventArgs> ChangeEventCallback { get; }
 
+    // Mutable properties that may change any time an InputRadioGroup is rendered
+    public string? GroupName { get; set; }
+    public object? CurrentValue { get; set; }
+    public string? FieldClass { get; set; }
+
     /// <summary>
     /// Instantiates a new <see cref="InputRadioContext" />.
     /// </summary>
-    /// <param name="parentContext">The parent <see cref="InputRadioContext" />.</param>
-    /// <param name="groupName">The name of the input radio group.</param>
-    /// <param name="currentValue">The current selected value in the input radio group.</param>
-    /// <param name="fieldClass">The css class indicating the validation state of input radio elements.</param>
+    /// <param name="parentContext">The parent context, if any.</param>
     /// <param name="changeEventCallback">The event callback to be invoked when the selected value is changed.</param>
-    public InputRadioContext(
-        InputRadioContext? parentContext,
-        string groupName,
-        object? currentValue,
-        string fieldClass,
-        EventCallback<ChangeEventArgs> changeEventCallback)
+    public InputRadioContext(InputRadioContext? parentContext, EventCallback<ChangeEventArgs> changeEventCallback)
     {
-        _parentContext = parentContext;
-
-        GroupName = groupName;
-        CurrentValue = currentValue;
-        FieldClass = fieldClass;
+        ParentContext = parentContext;
         ChangeEventCallback = changeEventCallback;
     }
 
@@ -59,5 +33,5 @@ public InputRadioContext(
     /// <param name="groupName">The group name of the ancestor <see cref="InputRadioContext"/>.</param>
     /// <returns>The <see cref="InputRadioContext"/>, or <c>null</c> if none was found.</returns>
     public InputRadioContext? FindContextInAncestors(string groupName)
-        => string.Equals(GroupName, groupName) ? this : _parentContext?.FindContextInAncestors(groupName);
+        => string.Equals(GroupName, groupName) ? this : ParentContext?.FindContextInAncestors(groupName);
 }

src/Components/Web/src/Forms/InputRadioGroup.cs

@@ -30,21 +30,33 @@ public class InputRadioGroup<[DynamicallyAccessedMembers(DynamicallyAccessedMemb
     /// <inheritdoc />
     protected override void OnParametersSet()
     {
-        var groupName = !string.IsNullOrEmpty(Name) ? Name : _defaultGroupName;
-        var fieldClass = EditContext?.FieldCssClass(FieldIdentifier) ?? string.Empty;
-        var changeEventCallback = EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString);
+        // On the first render, we can instantiate the InputRadioContext
+        if (_context is null)
+        {
+            var changeEventCallback = EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString);
+            _context = new InputRadioContext(CascadedContext, changeEventCallback);
+        }
+        else if (_context.ParentContext != CascadedContext)
+        {
+            // This should never be possible in any known usage pattern, but if it happens, we want to know
+            throw new InvalidOperationException("An InputRadioGroup cannot change context after creation");
+        }
 
-        _context = new InputRadioContext(CascadedContext, groupName, CurrentValue, fieldClass, changeEventCallback);
+        // Mutate the InputRadioContext instance in place. Since this is a non-fixed cascading parameter, the descendant
+        // InputRadio/InputRadioGroup components will get notified to re-render and will see the new values.
+        _context.GroupName = !string.IsNullOrEmpty(Name) ? Name : _defaultGroupName;
+        _context.CurrentValue = CurrentValue;
+        _context.FieldClass = EditContext?.FieldCssClass(FieldIdentifier);
     }
 
     /// <inheritdoc />
     protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         Debug.Assert(_context != null);
 
+        // Note that we must not set IsFixed=true on the CascadingValue, because the mutations to _context
+        // are what cause the descendant InputRadio components to re-render themselves
         builder.OpenComponent<CascadingValue<InputRadioContext>>(0);
-        builder.SetKey(_context);
-        builder.AddAttribute(1, "IsFixed", true);
         builder.AddAttribute(2, "Value", _context);
         builder.AddAttribute(3, "ChildContent", ChildContent);
         builder.CloseComponent();

src/Components/test/E2ETest/Tests/FormsTest.cs

@@ -360,37 +360,36 @@ public void InputRadioGroupWithoutNameInteractsWithEditContext()
         var appElement = MountTypicalValidationComponent();
         var messagesAccessor = CreateValidationMessagesAccessor(appElement);
 
+        // By capturing the inputradio elements just once up front, we're implicitly showing
+        // that they are retained as their values change
+        var unknownAirlineInput = FindAirlineInputs().First(i => string.Equals("Unknown", i.GetAttribute("value")));
+        var bestAirlineInput = FindAirlineInputs().First(i => string.Equals("BestAirline", i.GetAttribute("value")));
+
         // Validate selected inputs
-        Browser.True(() => FindUnknownAirlineInput().Selected);
-        Browser.False(() => FindBestAirlineInput().Selected);
+        Browser.True(() => unknownAirlineInput.Selected);
+        Browser.False(() => bestAirlineInput.Selected);
 
         // InputRadio emits additional attributes
-        Browser.True(() => FindUnknownAirlineInput().GetAttribute("extra").Equals("additional"));
+        Browser.True(() => unknownAirlineInput.GetAttribute("extra").Equals("additional"));
 
         // Validates on edit
-        Browser.Equal("valid", () => FindUnknownAirlineInput().GetAttribute("class"));
-        Browser.Equal("valid", () => FindBestAirlineInput().GetAttribute("class"));
+        Browser.Equal("valid", () => unknownAirlineInput.GetAttribute("class"));
+        Browser.Equal("valid", () => bestAirlineInput.GetAttribute("class"));
 
-        FindBestAirlineInput().Click();
+        bestAirlineInput.Click();
 
-        Browser.Equal("modified valid", () => FindUnknownAirlineInput().GetAttribute("class"));
-        Browser.Equal("modified valid", () => FindBestAirlineInput().GetAttribute("class"));
+        Browser.Equal("modified valid", () => unknownAirlineInput.GetAttribute("class"));
+        Browser.Equal("modified valid", () => bestAirlineInput.GetAttribute("class"));
 
         // Can become invalid
-        FindUnknownAirlineInput().Click();
+        unknownAirlineInput.Click();
 
-        Browser.Equal("modified invalid", () => FindUnknownAirlineInput().GetAttribute("class"));
-        Browser.Equal("modified invalid", () => FindBestAirlineInput().GetAttribute("class"));
+        Browser.Equal("modified invalid", () => unknownAirlineInput.GetAttribute("class"));
+        Browser.Equal("modified invalid", () => bestAirlineInput.GetAttribute("class"));
         Browser.Equal(new[] { "Pick a valid airline." }, messagesAccessor);
 
         IReadOnlyCollection<IWebElement> FindAirlineInputs()
             => appElement.FindElement(By.ClassName("airline")).FindElements(By.TagName("input"));
-
-        IWebElement FindUnknownAirlineInput()
-            => FindAirlineInputs().First(i => string.Equals("Unknown", i.GetAttribute("value")));
-
-        IWebElement FindBestAirlineInput()
-            => FindAirlineInputs().First(i => string.Equals("BestAirline", i.GetAttribute("value")));
     }
 
     [Fact]