带有输入字段的 Ngb 下拉列表无法按预期工作

Question

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

有没有办法保持输入和要打开的下拉列表的焦点

<div ngbDropdown 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>

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

Answer 1

将焦点放在输入字段上并使下拉列表保持打开状态。您需要添加：

[autoClose]="'outside'"与ngbDropdown指令一起。

"外部" - 下拉列表将仅在外部单击时关闭，而不会在菜单单击时关闭。

这是您的文件名：下拉列表基本.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>

欲了解更多信息，请访问此处