HTMLElement focus() 阻止执行

Question

(以下代码是打字稿，我正在处理 angular 5，但我相信这不是罪魁祸首，但证明我错了！

我有一个简单的输入，它将一些事件传递给角度组件

(编辑：包括完整的组件代码(

<span class="__picker-container">
    <input type="text" #geoSearchBox (keypress)="keyPress($event)" (keyup)="searchTerms.next($event)" [placeholder]="placeholder" />
    <small *ngIf="isLoading">caricamento...</small>
    <div #pickerList class="__picker-list">
        <a href="javascript:;" *ngFor="let result of searchResults | async" (click)="select(result.id)">{{ result.name }} ({{ result.code }})</a>
    </div>
</span>

虽然keyup通过输入的同级UL的 rest 显示结果执行简单的搜索，但我使用 keypress 来检查当用户键入时是否使用了某些键盘代码。

特别是我正在寻找keyDown和keyUp，以循环浏览结果。查看代码：

keyPress(event: KeyboardEvent) {
    const pl = <HTMLDivElement>this.pickerList.nativeElement;
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
        if (pl.childElementCount > 0) {
            if (event.key === 'ArrowDown') {
                this.childNodeIndex = this.childNodeIndex++ < pl.childElementCount - 1 ? this.childNodeIndex++ : 0;
            } else if (event.key === 'ArrowUp') {
                this.childNodeIndex = this.childNodeIndex - 1 >= 0 ? this.childNodeIndex - 1 : pl.childElementCount - 1;
            }
            console.log(this.childNodeIndex);
            (<HTMLElement>pl.children[this.childNodeIndex]).focus();
        }
    }
}

现在一切都很简单。

现在奇怪的行为：调用 focus() 后，它正确地聚焦 html 元素，但阻止执行：其他按键事件被忽略。

如果我删除该行

(<HTMLElement>pl.children[this.childNodeIndex]).focus();

控制台.log为我发送的每次击键发出正确的值。

这段代码有什么问题？

提前致谢瓦莱里奥

Answer 1

如果将焦点设置为<a href="...">，则它是接收键盘事件的元素，而不是<input>。

将事件处理程序添加到<a href="...">也应该修复它

<a href="javascript:;" *ngFor="let result of searchResults | async" (click)="select(result.id)"
    (keypress)="keyPress($event)" (keyup)="searchTerms.next($event)"
    >{{ result.name }} ({{ result.code }})</a>