Can we use the event’s “path” attribute in Lightning Components?
When developing Aura or Lightning components in Salesforce, we often deal with events such as onfocus, onclick, or onchange. These events help us detect user actions and update component data accordingly. One common situation occurs when you have a repeating list of elements — for example, a list of input fields generated with <aura:iteration> — and you need to identify which specific element triggered the event.
Let’s take an example component that shows three input boxes. Each input box represents an item in an array, and when one gets focused, we want to know which one was clicked.
<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>
In this markup, every <div> element inside the iteration has a data-value attribute that stores the current index. When any input field is focused, it triggers the controller function focused.
Now, a developer tried to find which input was focused using the event.path property:
({
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));
}
})
In this code, event.target represents the element that triggered the event (in this case, the <lightning:input> field). The closest("div") function searches upward in the DOM hierarchy until it finds the nearest <div> element, which has the data-value attribute. The dataset.value then retrieves that attribute’s value, which represents the index of the item that was interacted with. Finally, parseInt(index) converts that value into a number, and component.set("v.currentIndex", index) updates the component’s currentIndex attribute so it can be displayed elsewhere in the UI.
This method is both secure and future-proof. It works within the constraints of Locker Service, avoids dependency on non-standard DOM features, and ensures consistent behavior across browsers and Salesforce updates. In conclusion, while the event.path property might appear to work in some scenarios, it is not a supported or reliable approach in Lightning Components. Using closest() is the correct and officially supported alternative that provides the same result safely.
At first glance, this works perfectly in Google Chrome and other Chromium-based browsers. The event.path property gives a list of all elements the event traveled through — from the target up to the root. The developer could easily find the parent <div> with data-value in that list and extract its value.
However, there’s a major issue: event.path is not a standard property. It’s a browser-specific feature that’s not part of the official DOM Events specification. Because of that, it is not documented or supported by Salesforce Locker Service. Using it can lead to unpredictable behavior, especially in browsers like Firefox or Safari, where event.path may not exist at all.
Salesforce’s Locker Service (and newer Lightning Web Security) adds extra layers of security to prevent direct and unsafe DOM access in Lightning Components. It restricts non-standard properties to ensure consistent, secure operation across all browsers and future updates. Hence, even if event.path seems to work today, Salesforce could block it at any time, breaking your component.
The Correct and Supported Way: Using closest()
Instead of using event.path, the recommended and fully supported approach is to use the closest() DOM method. This method is part of the standard DOM API and is allowed by Locker Service. It works reliably in all modern browsers and is safe for Lightning development.
Here’s how to rewrite the controller properly:
({
focused: function(component, event, helper) {
var index = event.target.closest("div").dataset.value;
component.set("v.currentIndex", parseInt(index));
}
})
Let’s break down what happens here:
event.target— This refers to the element that actually triggered the event. In our example, it’s the<lightning:input>field the user focused on.closest("div")— Theclosest()method looks up the DOM tree starting fromevent.targetand finds the nearest ancestor element that matches the given selector — here, the<div>that contains thedata-valueattribute.dataset.value— Thedatasetobject allows you to access any custom data attributes (likedata-value) on an HTML element. Sodataset.valuereturns the index we stored in the markup.parseInt(index)— Since dataset attributes are strings by default, we convert the index into an integer.component.set("v.currentIndex", index)— Finally, the index value is stored in the component’s attributecurrentIndex, which updates the display.
Why closest() is Better
Using closest() provides several benefits:
- Standards-compliant: It’s part of the official DOM specification and works across all major browsers.
- Locker Service compatible: It does not violate Salesforce’s security policies.
- Predictable behavior: Unlike
event.path, it won’t break when Salesforce updates the Lightning runtime or when switching browsers. - Cleaner code: It’s easier to read and understand than using array reduction logic on the
event.path.
Alternative Approach
If you want even more control or need to support older browsers, you can manually traverse up the DOM tree using parentNode:
({
focused: function(component, event, helper) {
var target = event.target;
while (target && !target.dataset.value) {
target = target.parentNode;
}
var index = target ? target.dataset.value : null;
component.set("v.currentIndex", parseInt(index));
}
})
This approach mimics what closest() does but without relying on that built-in method. It’s useful if you’re dealing with environments that might not support modern APIs.
Final Conclusion
You should not use event.path in Lightning Components because it’s a non-standard and unsupported property. It may seem convenient, but it poses long-term risks for compatibility and security.
The best practice is to use event.target.closest() to safely navigate the DOM and retrieve the data you need. This method ensures that your Lightning components remain secure, reliable, and future-proof within Salesforce’s Locker Service and Lightning Web Security frameworks.
In summary, event.path is an interesting discovery but not safe for production use in Salesforce. The closest() approach is the officially supported, stable, and cleaner alternative that should always be preferred.
Enroll for Career-Building Salesforce Training with Real-Time Projects
Our Salesforce Course is designed to offer a comprehensive understanding of the Salesforce platform, providing you with the essential skills needed to excel in the CRM industry. The program covers key modules like Salesforce Admin, Developer, and AI, blending theoretical concepts with hands-on experience. Through real-world projects and interactive assignments, you will gain the expertise to tackle business challenges using Salesforce solutions. Our expert trainers ensure you acquire both technical proficiency and industry knowledge to thrive in the Salesforce ecosystem.
Beyond technical learning, our Salesforce Training in Boston includes personalized mentorship, certification support, and interview preparation to boost your career prospects. You will have access to extensive study resources, practical project experience, and continuous guidance throughout your training. By the end of the course, you will be fully prepared for certification exams and equipped with real-world problem-solving skills that employers seek. Take the first step in your Salesforce journey with us and unlock limitless career opportunities. Sign up for a Free Demo today!
