Expose ReferenceElement for qualified input components

src/Components/Web/src/Forms/InputCheckbox.cs

@@ -21,6 +21,17 @@ namespace Microsoft.AspNetCore.Components.Forms
     /// </summary>
     public class InputCheckbox : InputBase<bool>
     {
+        private ElementReference? _inputElement;
+
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>
+        /// </summary>
+        public ElementReference InputElement
+        {
+            get => _inputElement ?? throw new InvalidOperationException($"Component must be rendered before {nameof(InputElement)} can be accessed.");
+            protected set => _inputElement = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -30,6 +41,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(3, "class", CssClass);
             builder.AddAttribute(4, "checked", BindConverter.FormatValue(CurrentValue));
             builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<bool>(this, __value => CurrentValue = __value, CurrentValue));
+            builder.AddElementReferenceCapture(6, __inputReference => InputElement = __inputReference);
             builder.CloseElement();
         }
 

src/Components/Web/src/Forms/InputDate.cs

@@ -15,12 +15,22 @@ namespace Microsoft.AspNetCore.Components.Forms
     public class InputDate<TValue> : InputBase<TValue>
     {
         private const string DateFormat = "yyyy-MM-dd"; // Compatible with HTML date inputs
+        private ElementReference? _inputElement;
 
         /// <summary>
         /// Gets or sets the error message used when displaying an a parsing error.
         /// </summary>
         [Parameter] public string ParsingErrorMessage { get; set; } = "The {0} field must be a date.";
 
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>
+        /// </summary>
+        public ElementReference InputElement
+        {
+            get => _inputElement ?? throw new InvalidOperationException($"Component must be rendered before {nameof(InputElement)} can be accessed.");
+            protected set => _inputElement = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -30,6 +40,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(3, "class", CssClass);
             builder.AddAttribute(4, "value", BindConverter.FormatValue(CurrentValueAsString));
             builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+            builder.AddElementReferenceCapture(6, __inputReference => InputElement = __inputReference);
             builder.CloseElement();
         }
 

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

@@ -15,6 +15,7 @@ namespace Microsoft.AspNetCore.Components.Forms
     public class InputNumber<TValue> : InputBase<TValue>
     {
         private readonly static string _stepAttributeValue; // Null by default, so only allows whole numbers as per HTML spec
+        private ElementReference? _inputElement;
 
         static InputNumber()
         {
@@ -41,6 +42,15 @@ static InputNumber()
         /// </summary>
         [Parameter] public string ParsingErrorMessage { get; set; } = "The {0} field must be a number.";
 
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>
+        /// </summary>
+        public ElementReference InputElement
+        {
+            get => _inputElement ?? throw new InvalidOperationException($"Component must be rendered before {nameof(InputElement)} can be accessed.");
+            protected set => _inputElement = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -51,6 +61,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(4, "class", CssClass);
             builder.AddAttribute(5, "value", BindConverter.FormatValue(CurrentValueAsString));
             builder.AddAttribute(6, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+            builder.AddElementReferenceCapture(7, __inputReference => InputElement = __inputReference);
             builder.CloseElement();
         }
 

src/Components/Web/src/Forms/InputSelect.cs

@@ -1,6 +1,7 @@
 // Copyright (c) .NET Foundation. All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
+using System;
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components.Rendering;
 
@@ -11,11 +12,22 @@ namespace Microsoft.AspNetCore.Components.Forms
     /// </summary>
     public class InputSelect<TValue> : InputBase<TValue>
     {
+        private ElementReference? _selectElement;
+
         /// <summary>
         /// Gets or sets the child content to be rendering inside the select element.
         /// </summary>
         [Parameter] public RenderFragment? ChildContent { get; set; }
 
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>
+        /// </summary>
+        public ElementReference SelectElement
+        {
+            get => _selectElement ?? throw new InvalidOperationException($"Component must be rendered before {nameof(SelectElement)} can be accessed.");
+            protected set => _selectElement = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -24,7 +36,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(2, "class", CssClass);
             builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValueAsString));
             builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
-            builder.AddContent(5, ChildContent);
+            builder.AddElementReferenceCapture(5, __selectReference => SelectElement = __selectReference);
+            builder.AddContent(6, ChildContent);
             builder.CloseElement();
         }
 

src/Components/Web/src/Forms/InputText.cs

@@ -1,6 +1,7 @@
 // Copyright (c) .NET Foundation. All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
+using System;
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components.Rendering;
 
@@ -20,6 +21,17 @@ namespace Microsoft.AspNetCore.Components.Forms
     /// </summary>
     public class InputText : InputBase<string?>
     {
+        private ElementReference? _inputElement;
+
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>
+        /// </summary>
+        public ElementReference InputElement
+        {
+            get => _inputElement ?? throw new InvalidOperationException($"Component must be rendered before {nameof(InputElement)} can be accessed.");
+            protected set => _inputElement = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -28,6 +40,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(2, "class", CssClass);
             builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValue));
             builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+            builder.AddElementReferenceCapture(5, __inputReference => InputElement = __inputReference);
             builder.CloseElement();
         }
 

src/Components/Web/src/Forms/InputTextArea.cs

@@ -1,6 +1,7 @@
 // Copyright (c) .NET Foundation. All rights reserved.
 // Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
 
+using System;
 using System.Diagnostics.CodeAnalysis;
 using Microsoft.AspNetCore.Components.Rendering;
 
@@ -20,6 +21,17 @@ namespace Microsoft.AspNetCore.Components.Forms
     /// </summary>
     public class InputTextArea : InputBase<string?>
     {
+        private ElementReference? _inputElement;
+
+        /// <summary>
+        /// Gets or sets the associated <see cref="ElementReference"/>
+        /// </summary>
+        public ElementReference InputElement
+        {
+            get => _inputElement ?? throw new InvalidOperationException($"Component must be rendered before {nameof(InputElement)} can be accessed.");
+            protected set => _inputElement = value;
+        }
+
         /// <inheritdoc />
         protected override void BuildRenderTree(RenderTreeBuilder builder)
         {
@@ -28,6 +40,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(2, "class", CssClass);
             builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValue));
             builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
+            builder.AddElementReferenceCapture(5, __inputReference => InputElement = __inputReference);
             builder.CloseElement();
         }
 

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

@@ -36,6 +36,25 @@ public async Task ValidationErrorUsesDisplayAttributeName()
             Assert.Contains("The Date property field must be a date.", validationMessages);
         }
 
+        [Fact]
+        public async Task InputElementIsAssignedSuccessfully()
+        {
+            // Arrange
+            var model = new TestModel();
+            var rootComponent = new TestInputHostComponent<DateTime, TestInputDateComponent>
+            {
+                EditContext = new EditContext(model),
+                ValueExpression = () => model.DateProperty,
+            };
+
+            // Act
+            var inputSelectComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
+            var exception = Record.Exception(() => inputSelectComponent.InputElement);
+
+            // Assert
+            Assert.Null(exception);
+        }
+
         private class TestModel
         {
             public DateTime DateProperty { get; set; }

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

@@ -35,6 +35,25 @@ public async Task ValidationErrorUsesDisplayAttributeName()
             Assert.Contains("The Some number field must be a number.", validationMessages);
         }
 
+        [Fact]
+        public async Task InputElementIsAssignedSuccessfully()
+        {
+            // Arrange
+            var model = new TestModel();
+            var rootComponent = new TestInputHostComponent<int, TestInputNumberComponent>
+            {
+                EditContext = new EditContext(model),
+                ValueExpression = () => model.SomeNumber,
+            };
+
+            // Act
+            var inputSelectComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
+            var exception = Record.Exception(() => inputSelectComponent.InputElement);
+
+            // Assert
+            Assert.Null(exception);
+        }
+
         private class TestModel
         {
             public int SomeNumber { get; set; }

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

@@ -194,6 +194,25 @@ public async Task ValidationErrorUsesDisplayAttributeName()
             Assert.Contains("The Some number field is not valid.", validationMessages);
         }
 
+        [Fact]
+        public async Task InputElementIsAssignedSuccessfully()
+        {
+            // Arrange
+            var model = new TestModel();
+            var rootComponent = new TestInputHostComponent<int, TestInputSelect<int>>
+            {
+                EditContext = new EditContext(model),
+                ValueExpression = () => model.NotNullableInt,
+            };
+
+            // Act
+            var inputSelectComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
+            var exception = Record.Exception(() => inputSelectComponent.SelectElement);
+
+            // Assert
+            Assert.Null(exception);
+        }
+
         enum TestEnum
         {
             One,

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

@@ -0,0 +1,35 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    public class InputTextAreaTest
+    {
+        [Fact]
+        public async Task InputElementIsAssignedSuccessfully()
+        {
+            // Arrange
+            var model = new TestModel();
+            var rootComponent = new TestInputHostComponent<string, InputTextArea>
+            {
+                EditContext = new EditContext(model),
+                ValueExpression = () => model.StringProperty,
+            };
+
+            // Act
+            var inputSelectComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
+            var exception = Record.Exception(() => inputSelectComponent.InputElement);
+
+            // Assert
+            Assert.Null(exception);
+        }
+
+        private class TestModel
+        {
+            public string StringProperty { get; set; }
+        }
+    }
+}

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

@@ -0,0 +1,35 @@
+// Copyright (c) .NET Foundation. All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Microsoft.AspNetCore.Components.Forms
+{
+    public class InputTextTest
+    {
+        [Fact]
+        public async Task InputElementIsAssignedSuccessfully()
+        {
+            // Arrange
+            var model = new TestModel();
+            var rootComponent = new TestInputHostComponent<string, InputText>
+            {
+                EditContext = new EditContext(model),
+                ValueExpression = () => model.StringProperty,
+            };
+
+            // Act
+            var inputSelectComponent = await InputRenderer.RenderAndGetComponent(rootComponent);
+            var exception = Record.Exception(() => inputSelectComponent.InputElement);
+
+            // Assert
+            Assert.Null(exception);
+        }
+
+        private class TestModel
+        {
+            public string StringProperty { get; set; }
+        }
+    }
+}