autofocus is not working

Question

Autofocus is not working

this is my code.

ej.base.enableRipple(true);

//  S E A R C H     B A R

// initialize AutoComplete component
var atcObj1 = new ej.dropdowns.AutoComplete({
    // bind the DataManager instance to dataSource property
    dataSource: new ej.data.DataManager({ url: 'https://icdsearchjsonservice.azurewebsites.net/api/ICD10CM', adaptor: new ej.data.WebApiAdaptor(), crossDomain: true }),
    // set the count for displays the suggestion items.
    suggestionCount: 50,
    // bind the Query instance to query property
    query: new ej.data.Query().from('getsearchautocomplete1').select(['full_title', 'code']).take(10).requiresCount(),
    // map the appropriate columns to fields property
    fields: { value: "full_title" },

    itemTemplate: "<span>${full_title} - <b>${code}</b></span>",
    // set the placeholder to AutoComplete input element
    placeholder: 'Search for an ICD 10 CM Code or free text...',
    // sort the resulted items
    sortOrder: 'Ascending',
    // enable the autofill property to fill a first matched value in input when press a down key
    autofill: false,
    // set the filterType to searching operation
    filterType: 'Contains',
    // text highlight
    highlight: true,

    floatLabelType: "Auto",

    autoFocus: true,

    select: function(argument) {
        console.log("New value selected is " + argument.itemData.full_title);

        // Render the TreeView with hierarchical data source
        var data = new ej.data.DataManager({
            url: 'https://services.odata.org/V4/Northwind/Northwind.svc',
            adaptor: new ej.data.ODataV4Adaptor(),
            crossDomain: true,
        });
        var query = new ej.data.Query().from('Employees').select('EmployeeID,FirstName,Title').take(10);
        var query1 = new ej.data.Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(10);

        var treeObj = new ej.navigations.TreeView({
            fields: {
                dataSource: data,
                query: query,
                id: 'EmployeeID',
                text: 'FirstName',
                hasChildren: 'EmployeeID',
                tooltip: 'Title',
                child: {
                    dataSource: data,
                    query: query1,
                    id: 'OrderID',
                    parentID: 'EmployeeID',
                    text: 'ShipName'
                }
            }
        });
        treeObj.appendTo('#tree');


    },
});

atcObj1.appendTo('#search-bar');

Jeyanth Muthu Pratheeban Sankara Subramanian · Accepted Answer

Hi Arshad,Greetings from Syncfusion Support.On seeing your snippet, we came to know that you were trying to use any of the following.  


Native autofocus attribute
Autofocus API as like EJ1
We would like to know you that there is no such API named autoFocus as like EJ1.By default, if you open the popup, first item will not be focused. If you want to focus the first item while opening, we suggest you to add a class which adds the focus behavior to the li element in open event of AutoComplete.  Please find the sample below.Sample Link : https://stackblitz.com/edit/delxhd?file=index.js If you want to use native autofocus like HTML5 input, we suggest you to use any one of the following.1. You can call focusIn() public method in created event which automatically focuses the control once it is rendered in the DOM. We prepared sample for this. Please refer the same in below.Sample Link : https://stackblitz.com/edit/delxhd-jntxqj?file=index.js2. As like native HTML5, you can add autofocus as an attribute to the input element. We also made sample to meet the requirement. Kindly refer this.Sample Link: https://stackblitz.com/edit/delxhd-2vvv7c?file=index.htmlRegards, 
Jeyanth.