1

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?

5
  • are there 2 components in your app with same id="inputField" ? Dec 6, 2018 at 21:02
  • also can you check whats the value of console.log(Array.isArray(cmp.find("inputField"))); Dec 6, 2018 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. Dec 6, 2018 at 21:16
  • can you add some more code that will help us reproduce this issue? Dec 6, 2018 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). Dec 6, 2018 at 21:21

2 Answers 2

4

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

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

4
  • 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. Dec 6, 2018 at 21:29
  • Mybad, I got confused between the two. Dec 6, 2018 at 21:33
  • Ah yeah I see the documentation for input:field lists the function as supported. Nice find. Dec 6, 2018 at 21:36
  • Unfortunately, this is still not supported in aura lightning:inputField, but it is now supported in the LWC lightning-input-field component: salesforce.stackexchange.com/questions/293343/… Apr 21, 2022 at 20:37
0

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

You must log in to answer this question.

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