5

I'm afraid I'm hitting a limit of Lightning here, but I'd thought I ask here as a last resort.

I want to programmatically add focus on a field in a form.

I now have code like this;

Markup:

<ui:inputText label="Duration" aura:id="DurationHhMm__c" blur="{!c.onDurationFieldChange}" updateOn="keyup"/>

Javascript:

component.find('DurationHhMm__c).getElement().focus();

But, this is not working. When I console.log(component.find('DurationHhMm__c').getElement()), I know why. Instead of the actual input, I get this back:

I am assuming there is no way I can call a Lightning method to focus the input and a more granular find is not allowed because of LockerService?

I realise I can just not use the Lightning component, and just do a plain input field, but I need to add focus dynamically and rather not change around the entire app at this point. And would this even work?

4
  • 1
    Based on that console log, can't you component.find("DurationHhMm__c").getElement().getElementsByTagName("INPUT")[0].focus()? Locker Service is only meant to lock you out of the entire DOM, but not the DOM within your component.
    – sfdcfox
    Nov 21, 2016 at 17:50
  • @sfdcfox Thanks for your comment! As soon as I call .getElement() with LockerService enabled, the app breaks. I guess using .focus() in general is not supported with the LockerService update? Nov 21, 2016 at 20:35
  • 2
    I saw a similar question about focusing, and wasn't able to get it to work either. The documentation suggests that we should be able to focus on elements we own, but in practice, it seems like we cannot.
    – sfdcfox
    Nov 21, 2016 at 20:41
  • Releated to salesforce.stackexchange.com/questions/152643/… Dec 23, 2016 at 17:37

1 Answer 1

1

This is working as designed. LockerService blocks you from accessing DOM of components from other namespaces(even if they are facets of your component). In your example, component.find('DurationHhMm__c) will return you a SecureComponentRef. An object of that type does not have getElement() defined on it.

To solve your problem, what you need to do is call the focus method on the facet component. Like so: component.find('DurationHhMm__c).focus()

ui:inputText and other input components in the ui namespace extend ui:input. ui:input exposes a method called focus to allow what you are trying to do.

3
  • This doesn't work: Access Check Failed! Component.method():'markup://ui:focus' is not visible to 'markup://c:CustomComponent {100:0}'.. I cannot believe that there is no way to do this
    – nicstella
    Dec 15, 2016 at 1:57
  • 1
    ^ which is odd, as I can see the method when logging the element to the console.
    – nicstella
    Dec 15, 2016 at 2:05
  • 1
    @nicstella I am going to file a bug for the team that owns ui:input to either expose the focus() method or provide a suggested equivalent Dec 21, 2016 at 1:25

You must log in to answer this question.

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