3

I am trying to enable a component to focus a particular nested child component (which happens to have been placed in it's facet by a parent component) upon some action happening in the component.

Primary Component Markup: primaryComponent.cmp

<aura:component>
    <aura:attribute name="editor" type="Aura.Component[]"/>
    <aura:attribute name="focusId" type="String"/>
    {!v.body}
    <lightning:button label="Focus It" onclick="{!c.onFocusButtonClick}"/>
    {!v.editor}
</aura:component>

Primary Component Controller: primaryComponent.js

({
    onFocusButtonClick: function(component, event, helper){
        var focusId = component.get("v.focusId");
        var editorInput = component.find(focusId);
        /*var editorComponents = component.get("v.editor");
        editorInput = editorComponents.find(component => {
            return component.getLocalId() == focusId;
        });*/
        editorInput.focus();
    }
})

Parent Component: parentComponent.cmp

<aura:component>
    <c:primaryComponent focusId="focusPoint">
        This is the body!
        <aura:set attribute="editor">
            <span>
                <lightning:input aura:id="focusPoint" value="{!v.theValue}"/>
            </span>
        </aura:set>
    </c:primaryComponent>
</aura:component>

I have included the "editor" facet here because it's what we are actually doing. I don't think there is any difference vs doing this within the "body" facet, but I didn't want to not give that information either.

Should component.find not work in this situation? Is it limited to use in the component where the aura:id is declared?

I have found one workaround. Just searching the facet for the component by .getLocalId(). The commented lines represent that workaround. They do work as long as the component is not nested. If the component rests directly within the facet (remove the span) this works. Once the component is nested inside the span, it does not work. So, I'm looking for a solution that does work when the component is nested.

I know that the aura:id of dynamically components cannot currently be accessed.

I don't think that's the same issue though. This is not dynamic component creation, it's just static parent component creation and addition to a child's facet. I'm just not sure if the child is intended to be able to access the component via the local id in this situation, or not. Perhaps the issue is parental insertion amounts to the same thing as dynamic creation. I'm not sure if that is true or not.

Improve this question
4
  • You're hurting my feelings @sfdcfox. In light of that revelation, do you happen to know if there is a way to implement onkeyup for a lightning:input without surrounding it with something else (the span) and doing it there? That's how the docs suggest doing it, and when you do it on the input it doesn't work, which is why I'm having to nest the input.
    – Tory Netherton
    Commented Dec 14, 2018 at 19:52
  • ha, no worries. I was just kidding when I said you were hurting my feelings. If you can think of better solution, I would love to hear it. Thank you for your time and attention.
    – Tory Netherton
    Commented Dec 14, 2018 at 20:22
  • I tried moving the onkeyup supporting span outside the primary component to surround it rather than being within it surrounding the input. This is not ideal, because it could interfere with other things, but it should be ok in this case. The event should bubble up and still work there, but unfortunately something goes wrong with that. event.getSource() seems to get lost somewhere in the depths of the framework and doesn't return the component. So, that doesn't work either.
    – Tory Netherton
    Commented Dec 14, 2018 at 21:14
  • Cleaned up my previous comments. After exhausting everything I can think of, I think you probably have one of the best possible ways to do it for now. Feel free to leave this question up, though, maybe someone else can puzzle through it.
    – sfdcfox ♦
    Commented Dec 14, 2018 at 21:30

1 Answer 1

Reset to default
-1

You can use an <aura:method> defined in the child component that call be called from a function in your parent: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm.

But in your case, I believe you actually want your event to bubble up, because the child component is going to be emitting the event. Therefore, you could use an <aura:event>: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component_example.htm and capture that event in the parent controller.

Improve this answer
1
  • Jon, my question is about a very specific issue. It's either a bug in the framework or they never intended component.find to work with parent added components. I'm well versed in the basic functionality of Lightning components. Thanks for trying though.
    – Tory Netherton
    Commented Dec 18, 2018 at 20:46

You must log in to answer this question.

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