html - 无法选择我的 ngui 自动完成滚动条

Question

每次我在下拉组件上选择 ngui-auto-complete 滚动条时，下拉列表都会消失。

将我的滚动条添加到另一个元素而不是 ngui-auto-complete 会更好吗？

工作示例:STACKBLITZ

dropdown.component.html

<form [formGroup]="myForm" class="form-style">
  <input
    id="input-dropdown"
    [list-formatter]="autocompleListFormatter"
    type="text"
    class="form-control"
    minlength="3"
    maxlength="20"
    ngui-auto-complete
    formControlName="gridDropdown"
    [source]="dropdownData"
    value-property-name="id"
    display-property-name="name"
    placeholder=" Search"
    [(ngModel)]="value"
    #agInput
  />
</form>

Source_code

Answer 1

您应该在输入元素上添加 [close-on-focusout]="false"。 https://www.npmjs.com/package/@ngui/auto-complete

它应该是这样的。

<form [formGroup]="myForm" id="input-dropdown" class="form-style">
  <!-- appAutoFocus - add this to input to use custom auto-focus directive-->
  <input id="input-dropdown" [list-formatter]="autocompleListFormatter" type="text" class="form-control"
    minlength="3" maxlength="20" ngui-auto-complete formControlName="gridDropdown" [source]="dropdownData" [close-on-focusout]="false"
    value-property-name="id" display-property-name="name" placeholder=" Search" [(ngModel)]="value" #agInput />
</form>