Blazor 引导程序 - 单击外部元素时下拉列表不会关闭

Question

在我的 Blazor Server 应用中，我无法让默认的引导下拉行为正常工作：当我单击菜单div 之外的任意位置时

，我需要下拉菜单消失。我尝试@onfocusout但是如果我在其中一个表单输入内单击，然后再次单击菜单div，菜单div 就会消失。我希望它在这个用例中持续存在。我只想在单击下拉按钮或其菜单和相应菜单内容以外的任何地方时让下拉菜单消失。

我的代码如下 - 我删除了一些表单元素以使其更易于浏览。

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle data-toggle="dropdown" type="button"
id="userLoginMenuButton" @onclick="(() => this.showUserMenu=!this.showUserMenu)">
<span>Click me!</span>
</button>
<div class="userLoginMenu dropdown-menu dropdown-menu-right @(showUserMenu? "show":"")" 
@onfocusout="() => this.showUserMenu = false" aria-labelledby="userLoginMenuButton">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[e-mail]">
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<AuthorizeView>
<Authorized Context="Auth">
<a class="dropdown-item" href="" @onclick="(() => Logout())">Logout</a>
</Authorized>
<NotAuthorized>
<a class="dropdown-item" href="" @onclick="(() => Login())">Login</a>
</NotAuthorized>
</AuthorizeView>
</div>
</div>

@code{
private bool showUserMenu = false;
public async Task Logout()
{
await ((CustomAuthenticationStateProvider)AuthenticationStateProvider).MarkUserAsLoggedOut();
NavigationManager.NavigateTo("");
}
private void Login()
{
NavigationManager.NavigateTo("/");
}
}

Answer 1

您必须将事件@onfocusout添加到"下拉"按钮，此事件将触发一个方法，我们将它命名为OutFocus。

由于它在下拉项单击事件之前触发，因此我们添加了延迟。

在组件上：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" 
@onclick="e => this.show = !this.show" 
@onfocusout="OutFocus">
DropDownText
</button>
<div class="dropdown-menu pre-scrollable @(show? "show":"")" >
<button class="dropdown-item" type="button" >
Item1
</button>
<button class="dropdown-item" type="button" >
Item2
</button>
<button class="dropdown-item" type="button" >
Item3
</button>
</div>
</div>

在代码上：

@code {
private bool show = false;
private async Task OutFocus() {
await Task.Delay(200);
this.show = false;
}
}

Answer 2

您是否尝试在下拉div 中使用dropdown-toggle？引导文档显示具有该属性的下拉菜单：

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

尝试切换您的下拉div 以包含dropdown-toggle。您不必使用黑客解决方法来实现您要做的事情。另外，请确保您也已安装Popper.js。

编辑：忽略了您在按钮上有dropdown-toggle。你也错过了aria-haspopup="true" aria-expanded="false".尝试添加它。