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?

  • 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 '16 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? – joshuadelange Nov 21 '16 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 '16 at 20:41
  • Releated to salesforce.stackexchange.com/questions/152643/… – TrevorBliss Dec 23 '16 at 17:37
0

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.

  • 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 '16 at 1:57
  • 1
    ^ which is odd, as I can see the method when logging the element to the console. – nicstella Dec 15 '16 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 – Ravi Jayaramappa Dec 21 '16 at 1:25
  • Let me know if you get anywhere :) – nicstella Dec 21 '16 at 1:53
  • Is there any update on this yet? :) – VarunC Feb 12 '17 at 13:49

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.