将 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(){&nbsp; &nbsp;this.showDropDown = true;}unFocusFunction() {&nbsp; setTimeout(() => { this.showDropDown = false; }, 500);}我认为检查这个 stackblitz 也会有帮助：&nbsp;https://stackblitz.com/edit/angular-search-filter ?file=app%2Fapp.component.ts

Answer 3

您是否在 CSS 中尝试将下拉类展开时的 z-index 设置为 1？请分享 plunkr 或 stackblitz 链接来查看该场景。