如何设置焦点在Angular 2中下拉列表的第一个列表项

Question

My template contains a dynamic list:

<mydropdown>
    <li *ngFor="let cookie of cookies" [class.disabled]="cookie.disabled">
        <a href="#">
            <span>{{cookie}}</span>            
        </a>
    </li>
</mydropdown>

This dropdown is opened when clicked on a button until then it's not in the DOM.

I have implemented a focus directive as follows:

import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[myFocus]"
})
export class Focus {
    @Input('myFocus') indx: boolean;
    constructor(private _el: ElementRef) {

    }

    ngOnInit() {
         if(this.indx){
           this._el.nativeElement.focus();
         }
    }

}

Usage: I am calling the myFocus on the list element of the template as follows:

<mydropdown>
        <li *ngFor="let cookie of cookies; let indx=index" [myFocus]="!indx" [class.disabled]="cookie.disabled">
            <a href="#">
                <span>{{cookie}}</span>            
            </a>
        </li>
    </mydropdown>

So, I am trying to get the focus on the first list item of the dropdown.

When I debug the code, I do enter my focus code and the this._el contains the list item. So, the focus is getting called on the list item. But the focus state doesn't show up on the list item of the dropdown.

Am I doing something wrong? Should I do this after the view has been loaded completely or should I subscribe to something? Could anyone guide me in a right direction.

Answer 1

You need to add attribute tabindex="-1" to your li elements.

PS: If you add [attr.tabindex]="indx" it will not work, don't know why yet.

Here is an Example