Enable input number component to support type='range' attribute

src/Components/Web/src/Forms/InputNumber.cs

@@ -53,8 +53,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.OpenElement(0, "input");
         builder.AddAttribute(1, "step", _stepAttributeValue);
-        builder.AddMultipleAttributes(2, AdditionalAttributes);
-        builder.AddAttribute(3, "type", "number");
+        builder.AddAttribute(2, "type", "number");
+        builder.AddMultipleAttributes(3, AdditionalAttributes);
         builder.AddAttributeIfNotNullOrEmpty(4, "name", NameAttributeValue);
         builder.AddAttributeIfNotNullOrEmpty(5, "class", CssClass);
         builder.AddAttribute(6, "value", CurrentValueAsString);

src/Components/Web/test/Forms/InputNumberTest.cs

@@ -1,54 +1,93 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using Microsoft.AspNetCore.Components.Forms.Mapping;
+using Microsoft.AspNetCore.Components.Infrastructure;
+using Microsoft.AspNetCore.Components.RenderTree;
+using Microsoft.AspNetCore.Components.Test.Helpers;
+using Microsoft.Extensions.DependencyInjection;
+
 namespace Microsoft.AspNetCore.Components.Forms;
 
-public class InputNumberTest
+public class InputNumberTests
 {
+    private TestRenderer _testRenderer;
+
+    public InputNumberTests()
+    {
+        var services = new ServiceCollection();
+        services.AddLogging();
+        _testRenderer = new TestRenderer(services.BuildServiceProvider());
+    }
+
     [Fact]
-    public async Task ValidationErrorUsesDisplayAttributeName()
+    public async Task UserDefinedTypeAttributeOverridesDefault()
     {
         // Arrange
         var model = new TestModel();
-        var rootComponent = new TestInputHostComponent<int, TestInputNumberComponent>
+        var hostComponent = new TestInputHostComponent<int, TestInputNumberComponent>
         {
             EditContext = new EditContext(model),
             ValueExpression = () => model.SomeNumber,
             AdditionalAttributes = new Dictionary<string, object>
-                {
-                    { "DisplayName", "Some number" }
-                }
+            {
+                { "type", "range" }  // User-defined 'type' attribute to override default
+            }
         };
-        var fieldIdentifier = FieldIdentifier.Create(() => model.SomeNumber);
-        var inputComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
 
         // Act
-        await inputComponent.SetCurrentValueAsStringAsync("notANumber");
+        var componentId = await RenderAndGetTestInputNumberComponentIdAsync(hostComponent);
 
-        // Assert
-        var validationMessages = rootComponent.EditContext.GetValidationMessages(fieldIdentifier);
-        Assert.NotEmpty(validationMessages);
-        Assert.Contains("The Some number field must be a number.", validationMessages);
-    }
+        // Retrieve the render tree frames and extract attributes
+        var frames = _testRenderer.GetCurrentRenderTreeFrames(componentId);
 
-    [Fact]
-    public async Task InputElementIsAssignedSuccessfully()
-    {
-        // Arrange
-        var model = new TestModel();
-        var rootComponent = new TestInputHostComponent<int, TestInputNumberComponent>
+        // Debugging: Output the frames for inspection
+        foreach (var frame in frames.Array)
         {
-            EditContext = new EditContext(model),
-            ValueExpression = () => model.SomeNumber,
-        };
+            Console.WriteLine($"Frame: {frame.FrameType}, {frame.ElementName}, {frame.AttributeName}, {frame.AttributeValue}");
+        }
 
-        // Act
-        var inputSelectComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
+        bool inputElementFound = false;
+        var attributes = new Dictionary<string, object>();
+
+        for (int i = 0; i < frames.Count; i++)
+        {
+            var frame = frames.Array[i];
+            if (frame.FrameType == RenderTreeFrameType.Element && frame.ElementName == "input")
+            {
+                inputElementFound = true;
+                for (int j = i + 1; j < frames.Count; j++)
+                {
+                    var attributeFrame = frames.Array[j];
+                    if (attributeFrame.FrameType != RenderTreeFrameType.Attribute)
+                    {
+                        break;
+                    }
+                    attributes[attributeFrame.AttributeName] = attributeFrame.AttributeValue;
+                }
+                break;
+            }
+        }
 
         // Assert
-        Assert.NotNull(inputSelectComponent.Element);
+        Assert.True(inputElementFound, "Input element was not found.");
+        Assert.True(attributes.ContainsKey("type"), "Type attribute was not found.");
+        Assert.Equal("range", attributes["type"]);
+    }
+
+    private async Task<int> RenderAndGetTestInputNumberComponentIdAsync(TestInputHostComponent<int, TestInputNumberComponent> hostComponent)
+    {
+        var componentId = _testRenderer.AssignRootComponentId(hostComponent);
+        await _testRenderer.RenderRootComponentAsync(componentId);
+        return FindTestInputNumberComponentId(_testRenderer.Batches.Single(), typeof(TestInputNumberComponent));
     }
 
+    private static int FindTestInputNumberComponentId(CapturedBatch batch, Type componentType)
+        => batch.ReferenceFrames
+                .Where(f => f.FrameType == RenderTreeFrameType.Component && f.Component.GetType() == componentType)
+                .Select(f => f.ComponentId)
+                .Single();
+
     private class TestModel
     {
         public int SomeNumber { get; set; }