Включить тег div в фокус ввода

Question

Итак, у меня есть вход с раскрывающимся списком внизу. Поэтому, когда я нажимаю на вход, открывается раскрывающийся список. Но я не могу ничего выбрать из выпадающего списка, потому что он не сфокусирован. Поэтому, когда я нажимаю на значение, оно не выбирается, и раскрывающийся список снова закрывается, поскольку он теряет фокус. Теперь мне интересно, как я могу включить div в фокус ввода.

HTML input:

<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

blur событие происходит на вашем input из-за mousedown в элементе списка

Поэтому, чтобы предотвратить это, вам нужно добавить

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

обработчик для ваших элементов списка. Я создал простую демонстрацию:

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

Answer 2

Самый простой подход был бы следующим:

focusFunction(){
   this.showDropDown = true;
}

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

Я думаю, что проверка этого стекаблика также помогла бы: https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts

Answer 3

Вы в своем CSS пытались установить z-index в 1 для раскрывающегося класса при его расширении?

Пожалуйста, поделитесь ссылкой на plunkr или stackblitz, чтобы посмотреть на сценарий.