I am using lightning:recordEditForm to display to users custom creation form and using lightning:inputField.

However, I am unable to set focus on a particular field. I know that Salesforce doesn't support focus on lightning:inputField yet. Salesforce has also said that using lightning:input inside lighthing:recordEditForm is not supported and hence, the focus will not work there as well. I have tried it and though the field is rendered focus doesn't work always.

My typical input field in the form looks like this

<lightning:inputField aura:id="contact" fieldName="ContactId" value="{!v.contactId}" onchange="{!c.doSomething}"/>

Has anybody been able to make focus work with lightning:inputField? Please note it has to work with pre-population.

  • Ever get anywhere with this?
    – Shanerk
    Jun 7, 2020 at 23:49

3 Answers 3


Because lighnting:inputField does not support focus property, there's no way you will be able to achieve it.

Also as you cannot utilize lightning:input within a lightning:recordEditForm, the same way you could utilize lightning:inputField, e.g., data type, FLS are automatically taken care of while using lightning:inputField within the context of lightning:recordEditForm. In absence of those, your only option here will be to create a completely custom component utilizing lightning:input which supports the focus property and be able to focus on the respective element.

Aside from this, you should review how significant is your focus requirements vs. building anything custom.

  • can you please provide any documentation where lightning:input can not utilize with in lighting:recordeditform
    – sdandamud1
    May 28, 2019 at 19:26
  • To be very clear, cannot be utilized here refers to the expected behavior of the component within that context. E.g., rendering the exact field type. Having FLS implemented (enforced by lightning:recordEditForm). Let me make an edit to explicitly highlight what I meant.
    – Jayant Das
    May 28, 2019 at 19:30
  • yes i agree with that FLS and field data type are achieved by using lightning:inputfield. but we can use lighting:input and lighting:inputfield mix with in lightning:recordeditform
    – sdandamud1
    May 28, 2019 at 19:42
  • Yes you can, and that's the custom approach that I am referring to here. That will lead you to take care of additional stuff just to achieve focus on the element.
    – Jayant Das
    May 28, 2019 at 19:44
  • @JayantDas: Salesforce has officially communicated to me via salesforce case and emails that lightning:input is not supported within the context of lightning:recordEditForm. So using lightning:input gives mixed results in terms of focus and I am better off in not using it. The cost of designing an entirely custom with only lightning:input is huge and nobody will pay for it. The requirement of focus is very urgent and lack of this feature has resulted in a lot of negative feedback with customers switching back to classic. May 29, 2019 at 3:11

i just tweak lighting:recordeditform for research. since i couldn't find any where in documentation for lighting:recordeditform doesn't support for lightning:input so i tried with below code for set the focus for lighting:input with in lighting:recordeditform


<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes">

<aura:attribute name="newContact" type="Contact" default="{ 'sobjectType': 'Contact'}"/>

<!-- Display the new contact form -->
<div class="Create Contact">
    <lightning:card iconName="action:new_contact" title="Create Contact">
                                  onerror ="{!c.handlerror}"
            <lightning:messages />
            <lightning:inputField fieldName="AssistantName" value="{!v.newContact.AssistantName}"></lightning:inputField>
            <lightning:inputField fieldName="Age__c" value="{!v.newContact.Age__c}"></lightning:inputField>
            <lightning:input label="email" type="email" aura:id="emailfld" value="{!v.newContact.Email}"></lightning:input>
            <lightning:button class="slds-m-top_small" variant="brand" name="update" type="submit" label="Save"  />


handleSubmit: function(component, event, helper) {
    // Prepare a new record from template
     var newcon = component.get("v.newContact");
     var newconstr = JSON.stringify(newcon); //newconstr = "{"sobjectType":"Contact","AssistantName":"setesting","Age__c":"32"}"


enter image description here

  • You have written focus method in "handleSubmit" which will be invoked when user submits the form. The requirement is to focus on the field as soon as its loaded so that the user doesn't have to scroll to correct field. You won't find the documentation about lightning:input not been supported in lightning:recordEditForm as salesforce communicated this to me in an email. May 29, 2019 at 3:02

OK thanks for the conversation here. It allowed me to come up with an out-of-the-box solution. Basically you have to create a lightning-input field and give it focus, then have Javascript which copies the value onblur to your lightning-input-field. Sample code:


<lightning-input label="First Name" data-element="first-name" onblur={updateName}>

<lightning-input-field field-name="FirstName" data-element="first-name-field" class="slds-hide">


hasRendered = false;

renderedCallback() {
    if (this.hasRendered) return;
    const inputBox = this.template.querySelector('[data-element="first-name"]');
    if (inputBox) {
    this.hasRendered = true;

updateName() {
    const firstName = this.template.querySelector('[data-element="first-name"]').value;
    this.template.querySelector('[data-element="first-name-field"]').value = firstName;
  • 2
    Shane I had posted this question in the context of Aura components and not Lightning Web Components. Since, the start of this year I have also switched the components to LWC. Aug 28, 2020 at 15:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .