Set focus

[Benjamim Goulart Bessa]

What is the correct way to programmatically set the focus on an EJS-COMBOBOX?

[Berly Christopher]

Hi Benjamim, 

Greetings from Syncfusion support. 

We can auto focus the EJ2 ComboBox component by calling focusIn() public method in the created event as mentioned below.  

[app.component.html] 

<ejs-combobox id='games' #local [dataSource]='sportsData' [autofill]='true' [fields]='localFields' [placeholder]='localWaterMark' (created)="onCreate($event)"></ejs-combobox> 

[app.component.ts] 

export class AppComponent { 

    @ViewChild('local') 

    public comboObj: ComboBoxComponent; 

    public sportsData: Object[] = [ 

        { Id: 'Game1', Game: 'American Football' }, 

        { Id: 'Game2', Game: 'Badminton' }, 

        { Id: 'Game3', Game: 'Basketball' }, 

        { Id: 'Game4', Game: 'Cricket' }, 

        { Id: 'Game5', Game: 'Football' }, 

        { Id: 'Game6', Game: 'Golf' }, 

        { Id: 'Game7', Game: 'Hockey' }, 

        { Id: 'Game8', Game: 'Rugby' }, 

        { Id: 'Game9', Game: 'Snooker' }, 

        { Id: 'Game10', Game: 'Tennis' } 

    ]; 

    // maps the local data column to fields property 

    public localFields: Object = { text: 'Game', value: 'Id' }; 

    // set the placeholder to ComboBox input element 

    public localWaterMark = "Select game"; 

    public onCreate(args){ 

      this.comboObj.focusIn(); 

    } 

 

Please find the sample from the below link. 

Sample Link: https://stackblitz.com/edit/angular-946dpy?file=app.component.ts 

To know more about available properties, events and methods in the ComboBox component, please refer the below documentation link. 

 

UG Link: https://ej2.syncfusion.com/angular/documentation/combo-box/data-binding/  

 

API Link: https://ej2.syncfusion.com/angular/documentation/api/combo-box#focusin  

Regards, 

Berly B.C