Blazor Dropdown with Search field - Handle Onfocusout

Question

我有一个带有搜索字段的下拉列表来过滤列表。以下是基本结构：

<div class="dropdown">
<button class="dropdown-button dropdown-toggle" @onclick="e => this.show = !this.show"></button>
<div class="dropdown-menu @(show ? "show" : "")">
<input class="form-control form-control-sm" placeholder="type filter..."/>
<div class="scrollable-menu">
<table>
...
</table>
</div>
</div>
</div>

当用户单击其他位置时，如何隐藏下拉列表？如果我使用按钮的onblur事件，则当用户单击过滤器输入内部时，下拉列表将被隐藏-->不起作用。下拉菜单在下拉div之外，所以我不能使用它。如果我能以某种方式将按钮和下拉列表组合在一起，使得只有当用户点击该"按钮"之外时才会触发聚焦事件，这将是理想的；组"；元素。

编辑

我更新了剪切的代码，以显示如何切换下拉列表。当用户选择列表中的元素时，show变量也会反转。

Answer 1

最简单的方法是使用CSS-默认情况下隐藏scrollable-menu，然后在dropdown中的任何内容都有焦点时显示它。

.scrollable-menu {
display: none;
}
.dropdown:focus-within .scrollable-menu {
display: block;
}

编辑：添加更复杂的基于Blazor事件的版本

这个问题(我以前还没有完全理解(通常在javascript检测焦点更改的目标元素是否在容器内时解决，但这意味着interop调用可以设置/更新显示字段。

一个纯粹的Blazor解决方案可以通过延迟隐藏和取消(如果焦点仍然在内部(来处理。

<div class="dropdown">       
<button class="dropdown-button dropdown-toggle" @onclick=HandleClick @onfocus=HandleFocus @onblur=HandleBlur ></button>
<div class="dropdown-menu @(show ? "show" : "")" @onfocusin=HandleFocus @onfocusout=HandleBlur tabindex="-1">
<input class="form-control form-control-sm" placeholder="type filter..."/>
<div class="scrollable-menu">
<table>
...
</table>
</div>
</div>
</div>

@code{
bool show;
CancellationTokenSource tokenSource;
void HandleClick() => show = !show;
async Task HandleBlur(FocusEventArgs a)
{
tokenSource = new CancellationTokenSource();
await Task.Factory.StartNew(async ()=> {
await Task.Delay(100);
show = false;
await InvokeAsync(StateHasChanged);
},tokenSource.Token);
}        
void HandleFocus(FocusEventArgs a)
{
if (tokenSource is CancellationTokenSource)
tokenSource.Cancel();
}        
}

在这里试试：https://blazorrepl.com/repl/wFESlpaa33iocZJR52

Answer 2

使用InvokeVoidAsync。如果你使它异步，它将不起作用。

@onclick="@(e => {
JsRuntime.InvokeVoidAsync("eval",$"bootstrap.Dropdown(yourID).toggle()");
})"