将 div 标签包含到输入的焦点中

Question

所以我有一个输入，下面有一个下拉菜单。因此，当我单击输入时，下拉菜单将打开。但我无法从下拉列表中选择任何内容，因为它没有聚焦。因此，当我单击一个值时，它不会被选中，并且下拉列表会再次关闭，因为它失去了焦点。所以我现在想知道如何将 div 包含到输入的焦点中。HTML 输入：<input  type="text" class="form-control myInput" [(ngModel)]="textToSort"(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}" (focus)="focusFunction()" (focusout)="unFocusFunction()"/>HTML div（下拉菜单）：<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >  <p   *ngFor="let data of dataList; let i = index"   class="data-list"                                   (click)="updateTextBox(i,data[columnName]); focusOnInput();"   [ngClass]="{highlight:checkHighlight(i)}"  > {{data[columnName]}}</p></div>成分：focusFunction(){    this.showDropDown = true;  }unFocusFunction() {    this.showDropDown = false;  }

Answer 1

blurinput由于mousedown列表项，您发生了事件

所以为了防止这种情况你需要添加

(mousedown)="$event.preventDefault()"

您的列表项的处理程序。我创建了简单的演示：

https://stackblitz.com/edit/angular-x3cdr1

Answer 2

最简单的方法如下：

focusFunction(){

   this.showDropDown = true;

}

unFocusFunction() {

  setTimeout(() => { this.showDropDown = false; }, 500);

}

我认为检查这个 stackblitz 也会有帮助： https://stackblitz.com/edit/angular-search-filter ?file=app%2Fapp.component.ts

Answer 3

您是否在 CSS 中尝试将下拉类展开时的 z-index 设置为 1？

请分享 plunkr 或 stackblitz 链接来查看该场景。