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.

4
  • 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/… Commented Jun 19, 2018 at 0:07
  • Interesting stuff here github.com/forcedotcom/aura/blob/… Commented Jun 19, 2018 at 0:09
  • Can you not put the lightning input+div inside a new component and add a index attribute and use it?
    – RedDevil
    Commented Jun 19, 2018 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
    Commented Jun 19, 2018 at 3:09

1 Answer 1

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));
    }
})

You must log in to answer this question.

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