Question

我正在使用ngb-dropdown。我试图将一个输入字段添加到下拉列表中。当我专注于输入字段时，弹出窗口关闭。

有什么方法可以保持输入焦点和要打开的下拉菜单

PFA <http://plnkr.co/edit/Q4JX2yFA9izPaPelcF9Y?p=preview>

Answer 1

要保持对输入字段的关注并使下拉列表保持打开状态。您需要添加：

[autoClose]="'outside'"和ngbDropdown指令。

“外部”-下拉菜单仅在外部点击时关闭，而不在菜单点击时关闭。

这是您的文件，名为：dropdown-basic.html成功复制

 <div class="row">
  <div class="col">
    <div ngbDropdown [autoClose]="'outside'" class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item">
          <input type="text" />
        </button>
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>
  </div>

  <div class="col text-right">
    <div ngbDropdown [autoClose]="'outside'" placement="top-right" class="d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <button class="dropdown-item">
          <input type="text" />
        </button>
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
      </div>
    </div>
  </div>
</div>

有关更多信息，请访问here

带输入字段的Ngb下拉菜单无法正常工作

1 个答案: