J'ai donc une entrée avec une liste déroulante en dessous. Ainsi, lorsque je clique sur une entrée, la liste déroulante s'ouvre. Mais je ne peux rien sélectionner dans la liste déroulante car elle n'est pas focalisée. Ainsi, lorsque je clique sur une valeur, elle n'est pas sélectionnée et la liste déroulante se ferme à nouveau car elle perd le focus. Je me demande donc maintenant comment inclure le div dans le focus de l'entrée.

Entrée HTML:

<input  type="text" class="form-control myInput" [(ngModel)]="textToSort"
(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}" 
(focus)="focusFunction()" (focusout)="unFocusFunction()"/>

Div HTML (liste déroulante):

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

Composante:

focusFunction(){
    this.showDropDown = true;
  }
unFocusFunction() {
    this.showDropDown = false;
  }
1
ernie 7 avril 2020 à 17:26

3 réponses

Meilleure réponse

L'événement blur se produit sur votre input en raison de mousedown sur l'élément de liste

Donc, pour éviter cela, vous devez ajouter

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

Gestionnaire pour vos éléments de liste. J'ai créé une démo simple:

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

1
Alex Voloshyn 7 avril 2020 à 15:46

L'approche la plus simple serait la suivante:

focusFunction(){
   this.showDropDown = true;
}

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

Je pense que vérifier ce stackblitz aiderait aussi: https://stackblitz.com/edit/angular- filtre de recherche? file = app% 2Fapp.component.ts

0
Omar Mohamed 7 avril 2020 à 15:17

Avez-vous, dans votre CSS, essayé de définir le z-index à 1 pour la classe déroulante lorsqu'il est développé?

Veuillez partager un lien plunkr ou stackblitz pour examiner le scénario.

0
Sharanya 7 avril 2020 à 14:41