I have a <lightning:inputField aura:id="inputField1"> in a modal window, and I want to focus on this field when the modal opens, so that the user doesn't have to use their mouse or tab to set focus.

However, when I try to set focus like this: cmp.find("inputField1").focus(), it throws an error saying that focus() is not a function. This does work, however, with lightning:input aura:id="inputField1".

I assume this is how Salesforce is using the Locker (or Proxy) to create elements, and it's not giving me a reference to the actual input element (maybe for security concerns in Communities or Portals).

Can anyone think of a way to set focus on this field?

  • are there 2 components in your app with same id="inputField" ? – Pranay Jaiswal Dec 6 '18 at 21:02
  • also can you check whats the value of console.log(Array.isArray(cmp.find("inputField"))); – Pranay Jaiswal Dec 6 '18 at 21:08
  • No, it's a singular element, the id is not actually "inputField" but descriptive of the application. The isArray function therefore returns false. – Jon Duelfer Dec 6 '18 at 21:16
  • can you add some more code that will help us reproduce this issue? – Pranay Jaiswal Dec 6 '18 at 21:18
  • No, but I think it's pretty descriptive. If you add a <lightning:inputField> element and then in your javascript controller try to call, cmp.find("you_element").focus(), you will get an error (or so I believe). – Jon Duelfer Dec 6 '18 at 21:21

lightning:inputField does not support focus as per their official documentation.

src: https://developer.salesforce.com/docs/component-library/bundle/lightning:inputField/specification

  • You used <lightning:input>, not <lightning:inputField>, which I'm assuming gets generated different from the Lightning perspective. As in my question, <lightning:input> seems to work fine. – Jon Duelfer Dec 6 '18 at 21:29
  • Mybad, I got confused between the two. – Pranay Jaiswal Dec 6 '18 at 21:33
  • Ah yeah I see the documentation for input:field lists the function as supported. Nice find. – Jon Duelfer Dec 6 '18 at 21:36

My solution to the issue is the following:

Add this class to the component CSS file:

.THIS .custom_focus input  {
outline: 0;
border-color: rgb(21, 137, 238);
background-color: rgb(255, 255, 255);
box-shadow: 0 0 3px #0070d2;}

Define a boolean attribute for every Lightning:inputField on the form:

<aura:attribute name="isFocus1" type="Boolean" default="false" />
<aura:attribute name="isFocus2" type="Boolean" default="false" />

Apply conditional styling to every lightning:inputField on the recordEditForm and wrap them with 'onclick' sensitive div-s:

<div onclick="{!c.onClick}"><lightning:inputField fieldName="FieldName1" class="{! v.isFocus1 ? 'custom_focus' : ''}" type="Lookup" /></div>
<div onclick="{!c.onClick}"><lightning:inputField fieldName="FieldName2" class="{! v.isFocus2 ? 'custom_focus' : ''}" type="Picklist"/></div>

Implement controller logic to apply 'focus' class to some specific lightning:inputField and to remove the focus from all the inputs when any gets clicked:

focusOnSmth: function(cmp, event, helper) {
    cmp.set('v.isFocus1', true);

onClick: function(cmp, event, helper) {
    cmp.set('v.isFocus1', false);
    cmp.set('v.isFocus2', false);

That did the trick for me. Cheers

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.