autofocus is not working

[Arshad]

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]

Hi Arshad,

Greetings from Syncfusion Support.

On seeing your snippet, we came to know that you were trying to use any of the following.  

1. Native autofocus attribute
2. 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.js

2. 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.html

Regards, 

Jeyanth.