Set focus to input

Thread ID:	Created:	Updated:	Platform:	Replies:
144082	Apr 17,2019 02:13 PM UTC	Apr 22,2019 11:26 AM UTC	JavaScript - EJ 2	5

Subscribe to this post

Tags: AutoComplete

S_Line

Asked On April 17, 2019 02:13 PM UTC

Is there a way to set focus to the autocomplete input?

I have a autocomplete input inside a schedule and i want to set focus to the field when the popup is open.

Thank you

Reply | Reply with quote

Gopi Govindasamy [Syncfusion]

Replied On April 18, 2019 07:46 AM UTC

Hi S_Line,

Thanks for contacting us.

We have checked your reported scenario for focusing the autocomplete component. We have provided public method for “focusIn” sets the focus to the component and for your scenario is schedule popup open focus the autocomplete. You can call the focusIn method in autoComplete created event or dialog open event after rendering the component. We have prepared test sample and code snippet for your reference.

API: https://ej2.syncfusion.com/documentation/api/auto-complete/#focusin

Sample Link: https://stackblitz.com/edit/enjvtb?file=index.html

var autoObj = new ej.dropdowns.AutoComplete({

dataSource: members,

fields: { value: 'text' },

floatLabelType: 'Always', placeholder: 'Team Members',

created: function(){

autoObj.focusIn();

}

});

autoObj.appendTo(inputEle);

Sample Link: https://stackblitz.com/edit/eoh4qc-8sek36?file=index.js

Regards,

Gopi G.

Reply | Reply with quote

S_Line

Replied On April 18, 2019 11:16 AM UTC

Thank you for the solution, but, when i try to double click on cell and open up the schedule popup event, the input get highlighted, but, the cursor not ready to type.

Reply | Reply with quote

Gopi Govindasamy [Syncfusion]

Replied On April 19, 2019 03:19 PM UTC

Hi S_Line,

Thanks for your update.

We have checked your scenario and the cause of the problem is autocomplete component render before popup open event, so dialog not opened and element not append to DOM. In popupOpen event argument returned popup element and take the popup instance and bind the open event, call the autocomplete focusIn method. Please find code snippet and sample for your reference.

args.element.ej2_instances[0].open = function() {

autoObj.focusIn();

}

Sample Link: https://stackblitz.com/edit/eoh4qc-qty2if?file=index.js

Regards,

Gopi G.

Reply | Reply with quote

S_Line

Replied On April 22, 2019 11:21 AM UTC

Thank you very much! It's working now.

Reply | Reply with quote

Prince Oliver [Syncfusion]

Replied On April 22, 2019 11:26 AM UTC

Hello S_Line,

Most Welcome. We are glad to help you.

Regards,

Prince

Reply | Reply with quote

Set focus to input

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US