@onblur防止在blazor服务器端应用程序中使用@onclick

Question

考虑以下情况

<div class="dropdown @(ShowDropdown ? " show" : "")">
    <input type="text" class="form-control" @onfocus="(async (e) => { ShowDropdown = true; })" @onblur="(async (e) => { ShowDropdown = false; })" @bind="SelectedWord" />
    @SelectedWord
    <div class="dropdown-menu @(ShowDropdown ? " show" : "")">

        @foreach (var word in words)
        {
            <button class="dropdown-item" @onclick="(async (e) => SelectedWord = word)">@word</button>
        }
    </div>
</div>

@code {
   private bool ShowDropdown = false;
   private string SelectedWord = "";

   private string[] words = { "word 1", "word 2", "word 3", "word 4" };
}

除非我删除@onblur，否则不会触发@onclick事件。

有解决方案吗？

Answer 1

将onclick换为onmousedown。这是浏览器中的事件排序问题，但这应该可以解决。