.NET MAUI Blazor安卓端可搜索下拉框选中值无法填入输入框

你的问题根源是Android WebView对原生<datalist>组件的支持存在兼容性缺陷，在Android 10/11版本中偶发选中值无法同步到输入框的情况，而Windows平台的WebView实现无此问题。以下是几种可行的解决方法：

方法一：替换原生datalist为自定义可搜索下拉组件 #

原生datalist在MAUI Blazor的Android WebView中表现不稳定，自行实现轻量可搜索下拉组件可彻底解决问题：

1. 创建自定义组件 SearchableDropdown.razor #

<div class="searchable-dropdown">
    <input type="text" 
           @bind="@SearchText" 
           @bind:event="oninput" 
           class="form-control" 
           placeholder="搜索..." 
           disabled="@Disabled" />
    @if (!string.IsNullOrEmpty(SearchText) && FilteredItems.Any())
    {
        <ul class="dropdown-list">
            @foreach (var item in FilteredItems)
            {
                <li @onclick="() => SelectItem(item)">@item.Text</li>
            }
        </ul>
    }
</div>

@code {
    [Parameter] public List<DropdownItem> Items { get; set; } = new();
    [Parameter] public EventCallback<DropdownItem> OnItemSelected { get; set; }
    [Parameter] public bool Disabled { get; set; }

    private string SearchText { get; set; } = string.Empty;
    private IEnumerable<DropdownItem> FilteredItems => Items.Where(i => 
        i.Text.Contains(SearchText, StringComparison.OrdinalIgnoreCase) || 
        i.Value.Contains(SearchText, StringComparison.OrdinalIgnoreCase));

    private async Task SelectItem(DropdownItem item)
    {
        SearchText = item.Value;
        await OnItemSelected.InvokeAsync(item);
    }

    public class DropdownItem
    {
        public string Value { get; set; } = string.Empty;
        public string Text { get; set; } = string.Empty;
    }
}

2. 添加组件样式（在wwwroot/css/site.css中） #

.searchable-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #dee2e6;
    border-top: none;
    background-color: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
}

.dropdown-list li {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.dropdown-list li:hover {
    background-color: #f8f9fa;
}

3. 在页面中使用组件 #

<div class="panel panel-default">
    <div class="panel-body ">
        <div class="container-fluid">
            <table class="table dt-responsive" id="header">
                <tr>
                    <th>From Code</th>
                    <td>
                        <SearchableDropdown 
                            Items="@locationItems" 
                            OnItemSelected="@(item => transferOrderHeader.Transfer_from_Code = item.Value)"
                            Disabled="@isDisabled" />
                    </td>
                    <th>To Code</th>
                    <td>
                        <SearchableDropdown 
                            Items="@locationItems" 
                            OnItemSelected="@(item => transferOrderHeader.Transfer_to_Code = item.Value)"
                            Disabled="@isDisabled" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code {
    private List<SearchableDropdown.DropdownItem> locationItems;

    protected override void OnInitialized()
    {
        // 转换现有数据为组件所需格式
        locationItems = datamodel.locations.Select(loc => new SearchableDropdown.DropdownItem
        {
            Value = loc.Code,
            Text = loc.Address.Name
        }).ToList();
    }
}

方法二：修复原生datalist的事件同步问题 #

若不想替换组件，可通过强制事件同步和组件刷新缓解问题：

修改输入框代码，绑定input事件并手动同步值：

<input type="search" 
       list="loclist" 
       @bind="@transferOrderHeader.Transfer_from_Code" 
       @bind:event="oninput" 
       @onchange="UpdateFrom" 
       disabled=@isDisabled />

<input type="search" 
       list="loclist" 
       @bind="@transferOrderHeader.Transfer_to_Code" 
       @bind:event="oninput" 
       @onchange="UpdateTo" 
       disabled=@isDisabled />

在代码中强制触发组件刷新：

private void UpdateFrom(ChangeEventArgs e)
{
    transferOrderHeader.Transfer_from_Code = e.Value?.ToString() ?? string.Empty;
    StateHasChanged(); // 强制组件重新渲染，确保值同步
}

private void UpdateTo(ChangeEventArgs e)
{
    transferOrderHeader.Transfer_to_Code = e.Value?.ToString() ?? string.Empty;
    StateHasChanged();
}

方法三：升级开发环境 #

你当前使用的Visual Studio 2022 17.4.4和.NET 6版本较旧，MAUI在后续的.NET 7/.NET 8版本中修复了大量WebView相关兼容性问题。建议升级到：

• .NET 8（长期支持版本）
• Visual Studio 2022 17.8或更高版本

升级后很多Android WebView的原生控件问题会被自动修复。

内容的提问来源于stack exchange，提问作者RollinB