Question: I'm trying to set focus to input control which is conditionally rendered. I'm setting `ElementReference` but it's id and context are both null.

```cs
<button @onclick="ToggleInput">Show input</button>
@if(showInput) {
    <input @ref="inputRef" type="text"/>
}

@code {
    private ElementReference inputRef;
    private bool showInput;

    async void ToggleInput() {
        showInput = !showInput;

        await inputRef.FocusAsync();
    }
}

```

When I press the button it shows this error in console:

> 
> System.InvalidOperationException: ElementReference has not been configured correctly
> 
> 
> 

Full error message:

[![enter image description here](https://i.stack.imgur.com/hSYTX.png)](https://i.stack.imgur.com/hSYTX.png)

Working example with error <https://blazorrepl.com/repl/wbueaMPK28hf2NNv09>

Answer: 
This seems to work and didn't have to be a separate component. I stuck it right on the start page.

```
<button @onclick="ToggleInput">Show input</button>
@if (showInput)
{
    <input @ref="inputRef" type="text" />
}

@code {
    private ElementReference inputRef;
    private bool showInput;

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (showInput) await inputRef.FocusAsync();
    }

    void ToggleInput()
    {
        showInput = !showInput;
    }
}

```
Move the input box to another component. Then you can then hook into the lifecycle of the component and call `.FocusAsync` after it has rendered.

<https://blazorrepl.com/repl/cluoEsvU59fl8zYM22>