CODEWITHSUNDEEP
angularautocompleteangular2-templateangular2-directives
niraja k
niraja k

Reputation: 153

When scrolling through a dropdown, how to sync mouse hover with keyboard focus Angular 2

I can scroll my dropdown using both keyboard up and down arrows as well as mouse hovering. But both work distinctively. I want to sync these 2 actions. That is if I am working with keyboard and switch to mouse, it should start from the same focus point and continue and vice versa. As you can see in the picture below, there are 2 options highlighted. One is by mouse hover and other by keyboard arrow keys. I want this to be only one. I am using Angular 2 and below is my code....I have taken care of most other things like the tab clicks and click outside and clicking enter for results etc. This is the only issue I am facing.

enter image description here

<input type="text" placeholder="Search" [(ngModel)]=search (input)="filterResults($event.target.value)">

<div *ngIf="searchList.length>0" class="searchdropdown">
    <div class="search" (click)="SearchItemSelect(item)" *ngFor="let item of searchList">{{item.value}}</div>
    </div>
</div>

Upvotes: 1

Views: 578

Answers (1)

niraja k
niraja k

Reputation: 153

This is normal behavior for dropdowns

Upvotes: 1

Related Questions