7

I've been working on a pretty complicated component, and I've had all kinds of trouble simply trying to identify which element is currently being used. After all sorts of experiments, I found a really nifty property on event, the "path" attribute. It seems to be a list of all elements that the event has gone through, and actually includes the data I'm looking for. However, I don't see this in the documentation anywhere, so I want to know if this attribute is reliable.

Here's some demo code:

<aura:application extends="force:slds">
    <aura:attribute name="items" type="Integer[]" default="[1,2,3]" />
    <aura:attribute name="currentIndex" type="Integer" />
    <aura:iteration items="{!v.items}" var="item" indexVar="index">
        <div data-value="{!index}" >
            <lightning:input onfocus="{!c.focused}" name="demo" label="Text" />
        </div>
    </aura:iteration>
    <lightning:input disabled="true" readOnly="true" type="number"
                     value="{!v.currentIndex}" label="Last Focused Item" />
</aura:application>

({
    focused: function(component, event, helper) {
        var index = event.path.reduce(
            (a,c) => c && c.dataset && c.dataset.value !== undefined? 
            c.dataset.value: a, null);
        component.set("v.currentIndex", parseInt(index));
    }
})

Does anyone know where I can find the documentation for this, or otherwise figure out if this supported behavior? I'd rather not use a feature that will be patched out of existence later, and it would finally solve my previous question about how to actually use a supported method that doesn't involve using a class, style, or name attribute, which should ideally be used for their intended purpose.

  • Here's where it's set: InstanceStack iStack = Aura.getContextService().getCurrentContext().getInstanceStack(); iStack.pushInstance(this, eventDefDescriptor); this.path = iStack.getPath(); github.com/forcedotcom/aura/blob/… – Caspar Harmer Jun 19 '18 at 0:07
  • Interesting stuff here github.com/forcedotcom/aura/blob/… – Caspar Harmer Jun 19 '18 at 0:09
  • Can you not put the lightning input+div inside a new component and add a index attribute and use it? – RedDevil Jun 19 '18 at 1:26
  • @RedDevil The problem I've had is if you put the event handler on the div, it doesn't fire, but if you put it on the lightning:input, you can't go "up" via parentNode, etc to find the index value. You might read my previous question for other workarounds, which ended up being pretty ... disappointing. – sfdcfox Jun 19 '18 at 3:09
2

Why not use closest? It's supported by Locker Service!

({
    focused: function(component, event, helper) {
        var index = event.target.closest("div").dataset.value;
        component.set("v.currentIndex", parseInt(index));
    }
})

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.