Why (keydown.enter) and (keydown) dont work for list?

Question

I have list of elements:

<div class="List">
<div class=" SearchListItem" [ngClass]="{ active: i == activeIndexResultItem }"
          *ngFor="let item of searchShortResultItems; let i = index"
          (mouseenter)="mouseEnterItem($event, i)" (keydown.enter)="searchByEnter($event, item)"
          (click)="selectSearchResult(item)"> {{ item.text }} 
        </div>
</div>

Why (keydown.enter) does not work?

searchByEnter(e, item) {
   console.log(e); // no invoke
}

Also I have tried to change to:

(keydown)="searchByEnter($event, item)"

The same result

Also I havea set focus on: <divclass="List"#searchList>:

 if (this.searchList) {
      setTimeout(() => this.searchList.nativeElement.focus(), 50);
}

check this: https://stackoverflow.com/questions/51267273/how-can-i-use-a-keydown-event-listener-on-a-div — porgo, Feb 20 '20 at 09:48
So how is the div going to get focus in order to fire key events? — Kurt Hamilton, Feb 20 '20 at 09:50

waterplea · Accepted Answer · 2020-02-20T10:23:52.657

1

Keyboard events are only dispatched on focused elements. You can add tabindex="0" to make your DIV focusable.

If your parent element is focused and you just keep track of current element from the list — add (keydown.enter) to parent element and pass your active item to that handler.

edited Feb 20 '20 at 10:23

answered Feb 20 '20 at 09:52

waterplea

3,462
5
31
47

Add to list element? – POV Feb 20 '20 at 09:57
add to `div class="SearchListItem"` – waterplea Feb 20 '20 at 09:58
it is dinamically item, I can not add -1 for all iems in loop – POV Feb 20 '20 at 10:01
You need to add 0 for all items, that means they are focusable in their natural order – waterplea Feb 20 '20 at 10:03
Also I need to st focus for parent list? – POV Feb 20 '20 at 10:03
Should I focus parent?
? Because now I can not move by keys up/down in list
– POV Feb 20 '20 at 10:04
If you want to be able to move with arrows, not with tab / shift+tab you need to implement it on your own with keydown.arrowUp and keydow.arrowDown with proper handlers – waterplea Feb 20 '20 at 10:05
I have implemented, by it requires focus on parent list. But now fucus is on element of list. Thats is why list is not scrolling by keys – POV Feb 20 '20 at 10:06
Then, if your parent element it focused ignore my commens. I've edited my answer. – waterplea Feb 20 '20 at 10:23
Okay I will try to add keyentr for parent – POV Feb 20 '20 at 10:25
it does not work becasu by enter I need to pass elemenet of list – POV Feb 20 '20 at 10:32
Focus is lost from parent when I hover, focus on element, that i why keyenter does not work for parent, for items too – POV Feb 20 '20 at 10:35
1

item from the list is `searchShortResultItems[activeIndexResultItem]` – waterplea Feb 20 '20 at 11:26

Why (keydown.enter) and (keydown) dont work for list?

1 Answers1