ng-select 的焦点不起作用 Angular 5

Question

i'm trying to use focus for ng-select in angular 5 but its not working

i'm working with ng2-select

---

How to use focus for ng-select in Angular 5 ?

<label class="input">
   <input (blur)="goTo()" type="text">
</label>

<label class="select" >
    <div *ngIf="items.length > 0" >
       <ng-select     #select [items]="items">
       </ng-select>
    </div>
</label>





@ViewChild('select') myElement: ElementRef;

    goTo(){
      this.myElement.element.nativeElement.focus();
    }

Answer 1

Change this

goTo(){
  this.myElement.element.nativeElement.focus();
}

to this,

import { ChangeDetectorRef } from '@angular/core';

constructor (private cRef: ChangeDetectorRef) {}

// import 'SelectComponent' from your library for 'ng2-select'
goTo(){
  let el = null;
  if (this.items.length > 0) {
    this.cRef.detectChanges();
    el = (this.myElement.nativeElement as SelectComponent).element.nativeElement.querySelector('div.ui-select-container > input');
    if (el) { el.focus(); }
  }
}

You may have to check if the element is defined or not (or if you need an extra 'nativeElement' in there, but I'm basically reusing the logic in here .

Just a cautionary note, this may not be a stable fix though if the library updates to rename these classes or modify the template.

Hope it helps.

Answer 2

A quick reply, in this solution,each select elements are recorded for future usage (and in this case , blur). This needs being adapted to your situation.

 import { Component, OnInit } from '@angular/core'; import { ViewChildren, QueryList } from '@angular/core'; @Component({ selector: 'app-editor', templateUrl: './editor.component.html', styleUrls: ['./editor.component.css'] }) export class EditorComponent implements AfterViewInit { // Viewchildren // https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e myindex:number; @ViewChildren("select") inputs: QueryList<any> constructor() { this.myindex=0 } // You will have to setup some input parameters in this function in order to switch to the right "select", (you have control) private goTo() { // focus next input field if (this.myindex +1 < this.inputs.toArray().length) { this.inputs.toArray()[this.myindex +1].nativeElement.focus(); this.myindex = this.myindex + 1; } else { this.inputs.toArray()[0].nativeElement.focus(); this.myindex = 0; } } private processChildren(): void { console.log('Processing children. Their count:', this.inputs.toArray().length) } ngAfterViewInit() { console.log("AfterViewInit"); console.log(this.inputs); this.inputs.forEach(input => console.log(input)); // susbcribe to inputs changes, each time an element is added (very optional feature ...) this.inputs.changes.subscribe(_ => this.processChildren() // subsequent calls to processChildren ); } }

Answer 3

this works fine for me,

@ViewChild('ngSelect') ngSelect: NgSelectComponent;
ngAfterViewInit() {
        if (this.autofocus) {
            setTimeout(() => {
                this.ngSelect.focus();
            });
        }
    }

refer https://github.com/ng-select/ng-select/issues/762

Answer 4

A Simple way, you can do this also.

<label class="input">
   <input (blur)="goTo(select)" type="text">
</label>

<label class="select">
    <div *ngIf="items.length > 0">
       <ng-select #select [items]="items">
       </ng-select>
    </div>
</label>

And in Typescript File.

goTo(select){
   select.focus();
}