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 protected]">
            </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

。因为它在 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;
    }

}

Answer 2

data-bs--auto-close

:

 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-auto-close="outside" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        ...
  </div>
</div>

https://getbootstrap.com/docs/5.0/components/dropdowns/#options

Answer 3

dropdown-toggle

？

Bootstrap Documentation

显示具有该属性的下拉菜单：

 <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"

。尝试添加它。