current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 4 down vote favorite
1

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?

share|improve this question
1  
Based on that console log, can't you component.find("DurationHhMm__c").getElement().getElementsBy‌​TagName("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
up vote 2 down vote

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.

share|improve this answer
    
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 at 13:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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