13

I have an input field:

<ui:inputText aura:id="name-input"/>

With controller code:

var input = cmp.find("name-input");
console.log(input);    
input.focus();

This gives the error:

Access Check Failed! Component.method():'markup://ui:focus' is not visible to 'markup://c:TimeTagCreator {100:0}'.

I can even see that the .focus() method exists, with the output of that console.log(); being:

enter image description here

What is going on here?

  • 1
    have you tried this? var input = cmp.find("name-input").getElement(); input.focus(); – Jason Benkert Dec 15 '16 at 3:35
  • 5
    getElement() isn't defined on lightning components when LockerService is enabled. That would would on an <input>, but doesn't on a <ui:inputText> – nicstella Dec 15 '16 at 4:03
  • 1
    One small but important detail to note here is that getElement() is defined on lightning components with LockerService enabled for components that you own. So if you built a <c:foo> component, for example, that had a single <input> element inside, getElement() would in fact return that input. It doesn't work in the OP case because the <input> lives inside ui:inputText, which would only be accessible to ui components, not your custom namespace. – TrevorBliss Dec 15 '16 at 16:56
  • @TrevorBliss I'm not sure that is correct, as I can't see this method even in the situation you are describing – nicstella Jan 9 '17 at 3:46
  • 1
    @nicstella focus() is an aura:method defined on the ui:inputText so if you are expected focus() to be visible in the situation I describe with the custom built <c:foo> component, you need to explicitly define that aura:method yourself. I was just using the custom component as an example for how getElement() works. – TrevorBliss Jan 9 '17 at 19:37
11

You're getting an Access Check Failure (ACF) here because the focus aura:method on ui:input (which ui:inputText extends) is not marked access=GLOBAL so it is not public available for use. Even though you can see the method defined on the ui:inputText object, the framework will verify access before letting you call it.

https://github.com/forcedotcom/aura/blob/master/aura-components/src/main/components/ui/input/input.cmp#L69

You can see more info on ACFs here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/access_intro.htm#access_intro

Since it's still in Beta, don't use it for anything that will end up in a managed package, but have you tried out lightning:input? https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_input.htm

Of course, you can always roll your own using the native <input> tag, but I do think this is something that should be fixed by the framework.

Edit:

The focus() method of lightning:input also throws an ACF currently, but will be fixed in the Spring '17 major release.

| improve this answer | |
  • 4
    I would strongly not recommend to use BETA tags if the app is to released as managed package .BETA components cannot be packaged and unless the component is GA i would be hesitant to try BETA for managed package builds – Mohith Shrivastava Dec 15 '16 at 8:26
  • @MohithShrivastava Yes good point. I updated my answer to include that disclaimer. – TrevorBliss Dec 15 '16 at 16:49
  • A viable option, except it forces you into the slds styling by default and requires a label, which is awkward if you want to do your own things with it – nicstella Dec 15 '16 at 20:22
  • 2
    @nicstella You're right. The ACF is still on the current code line but is fixed for the Spring '17 major release. Apologies, I was on a more current code line. – TrevorBliss Dec 23 '16 at 2:05
  • 1
    I'm not the best person to ask for that but since it's documented I assume it'll be available by the time it's not BETA if it isn't already available. developer.salesforce.com/docs/atlas.en-us.lightning.meta/… – TrevorBliss Apr 18 '17 at 5:09
6

aura:id allow you to use focus:

<ui:inputText aura:id="name-input"/>

Then, when the modal is displayed, select your input in your javascript function, and set the focus to it:

component.find("name-input").getElement().focus();

Make sure <ui:inputText aura:id="name-input"/> rendered propery. If still not working try to add setTimeout

setTimeout(function(){ 
    component.find("name-input").getElement().focus();
}, 100);
| improve this answer | |
  • 1
    getElement() is not working in a winter 18 dev box. I think it is yet to be fixed as mentioned in the previous answer. – Rao Oct 4 '17 at 17:39
0
Try this, I used the similar code for my desktop LEX, it works,
But it not working on the mobile (Salesforce App pages).

<ui:inputText id="{!globalId}" aura:id="name-input"/> 

var el = 
document.getElementById(component.getGlobalId('name-input'));
el.focus();
| improve this answer | |
  • 1
    Please provide an explanation as to why your code should work just dumping code anda sking for the OP to try it is not relaly usefull for anyone reading it, take a moment to re-read How to Answer if you havent done so already. Thanks – glls Apr 2 '18 at 17:24
  • This won't work because ui:inputText doesn't support id attribute. – Lightning Evangelist Aug 30 '18 at 18:26
  • Every component has a unique globalId, which is the generated runtime-unique ID of the component instance. The idea is getting the unique id of this HTML element, then focus on it. It works for my project, one exception is Safari browser-based app. I resolved it by using ui:scrollerWrapper (Github source code of Aura project explains why scrollerWrapper works in Safari). – Zeeman Chen Aug 31 '18 at 19:16

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.