如何在不丢失Blazor中输入的焦点的情况下更新输入的Datalist？

<input type="text" @bind="inputValue" />

List<string> dataListOptions = new List<string> { "Option 1", "Option 2", "Option 3" };

<input type="text" list="datalistOptions" @bind="inputValue" />
<datalist id="datalistOptions">
    @foreach (var option in dataListOptions)
    {
        <option value="@option"></option>
    }
</datalist>

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("updateDatalistOptions");
    }
}

window.updateDatalistOptions = function () {
    var inputElement = document.querySelector('input[type="text"]');
    var datalistElement = document.querySelector('datalist');

    // 清空datalist选项
    while (datalistElement.firstChild) {
        datalistElement.removeChild(datalistElement.firstChild);
    }

    // 添加新的datalist选项
    var options = ["New Option 1", "New Option 2", "New Option 3"];
    options.forEach(function (option) {
        var optionElement = document.createElement('option');
        optionElement.value = option;
        datalistElement.appendChild(optionElement);
    });

    // 恢复输入框的值
    inputElement.value = inputElement.value;
};