Blazor Bootstrap - 单击外部元素时下拉列表不会关闭

Question

在我的 Blazor Server 应用程序中，我无法使默认的 Bootstrap 下拉行为起作用：当我单击菜单 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="email@example.com">
            </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向 DropDown 按钮添加一个事件，该事件将触发一个我们将其命名为 的方法OutFocus。

因为它在 DropDown-item Click 事件之前触发，所以我们添加了一个延迟。

在组件上：

<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;
    }

}