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?

Improve this question
5
  • 1
    have you tried this? var input = cmp.find("name-input").getElement(); input.focus();
    – Jason Benkert
    Commented Dec 15, 2016 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
    Commented Dec 15, 2016 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
    Commented Dec 15, 2016 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
    Commented Jan 9, 2017 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
    Commented Jan 9, 2017 at 19:37

3 Answers 3

Reset to default
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
12
  • 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
    Commented Dec 15, 2016 at 8:26
  • @MohithShrivastava Yes good point. I updated my answer to include that disclaimer.
    – TrevorBliss
    Commented Dec 15, 2016 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
    Commented Dec 15, 2016 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
    Commented Dec 23, 2016 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
    Commented Apr 18, 2017 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
  • 2
    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
    Commented Oct 4, 2017 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
3
  • 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
    Commented Apr 2, 2018 at 17:24
  • This won't work because ui:inputText doesn't support id attribute.
    – Lightning Evangelist
    Commented Aug 30, 2018 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
    Commented Aug 31, 2018 at 19:16

You must log in to answer this question.

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