Exposing the inner ref of an element via BlazorComponent returns an emtpy(?) ref

I have a component that inherits from BlazorComponent with this code:

protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            base.BuildRenderTree(builder);
            builder.OpenElement(0, TagName);
            foreach (var param in _attributesToRender)
            {
                builder.AddAttribute(1, param.Key, param.Value);
            }
            if (_classname != null) builder.AddAttribute(1, "class", _classname);
            builder.AddElementReferenceCapture(2, capturedRef => { ElementRef = capturedRef; });
            builder.AddContent(3, _childContent);
            builder.CloseElement();
        }

It’s used like so:

<form onSubmit={this.alertValue}>
    <Dynamic TagName="input" ElementRef="@inputRef" />
        <button type="button" onclick="@OnClick">
            Submit
        </button>
</form>

@functions {
    ElementRef inputRef;

    async void OnClick()
    {
        await inputRef.AlertValue();
    }
}

Which ultimately prints out to the console what the ref is. Like so:

 public static class ElementRefExtensions
    {
        public static async Task AlertValue(this ElementRef elementRef)
        {
            await JSRuntime.Current.InvokeAsync<bool>("blazorousSample.alertValue", elementRef);
        }
    }

window.blazorousSample = {
    alertValue: function (element) {
        console.log("element: %O", element);
        alert(element.value);
    }
};

One the javascript console I get:

{
  "_blazorElementRef": null
}

[SimantoR]

I believe this should be added to the official Input[*] components that are meant to be used with EditForm. I recently wanted to build a word processor for a complicated form and took me a whole day to find and form a working solution

[SteveSandersonMS]

@AndreasTruetschel is correct. You will need bind-something for this to work, otherwise this line of code:

builder.AddElementReferenceCapture(2, capturedRef => { ElementRef = capturedRef; });

… is only writing to its own ElementRef property, not to the corresponding property on the caller.

Since you’re writing your component in raw C# instead of Razor, you’ll have to figure out what C# code is equivalent to the bind-something that Razor would generate.