Focusing on an input Field when using <lightning:inputField>

Question

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.

Answer 1

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.

Answer 2

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

cmp

<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">
        <lightning:recordEditForm
                                  onsubmit="{!c.handleSubmit}"
                                  onerror ="{!c.handlerror}"
                                  objectApiName="Contact">
            <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"  />
        </lightning:recordEditForm>
    </lightning:card>
</div>

controller.js

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

})

Answer 3

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:

HTML

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

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

Controller

hasRendered = false;

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

updateName() {
    const firstName = this.template.querySelector('[data-element="first-name"]').value;
    this.template.querySelector('[data-element="first-name-field"]').value = firstName;
  }