在下拉打开时聚焦 ng-select 过滤器输入

Question

我正在使用ng-select并定义了一个包含输入的自定义过滤器标题模板。

当为选择打开下拉菜单时，我希望输入获得焦点，但我不知道如何操作。

我这里有一个例子 -> https://stackblitz.com/edit/angular-playground-f57jog

我确实尝试附加到 ng-select(open)输出并调用focus()我的输入元素，但这对我来说失败了。

这里的正确方法是什么？谢谢

Answer 1

我会创建特殊指令并在需要的地方重用它：

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective implements OnInit {

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    this.el.nativeElement.focus();
  }
}

html

<input appAutofocus ... />

所以它应该适用于 Chrome、Firefox 等。

分叉的堆栈闪电战

Answer 2

将属性添加autofocus到您的input标签中

你的代码将是这样的：

<input autofocus #filterInput style="width: 100%; line-height: 24px" type="text" (input)="api.filter($event.target.value)"/>

stackbliz 演示的更新版本位于此处

希望能帮助到你 ：）