You need to sign in to do that
Don't have an account?
Inbox Outbox
1.When child component trigger an event it comes as detail if event trigger by DOM then comes as target.
2. event.target comes from html element
event.detail comes from custom event we write
I don't understand this from a code point. Both the codes are almost same. We are using combobox with onchange handler in both the components.
Why did we use event.detail in the first component but we used event.target in the second component?
I have two components below. In one component we have event.detail and another we have event.target.
Can someone please explain based on the below code?
Component 1: Wire service with getPicklistValues adapter
HTML:
<template>
<lightning-card title="getPicklistValues Demo">
<div class="slds-var-p-around_medium">
<lightning-combobox
name="Industry"
label="Industry"
value={selectedIndustry}
placeholder="Select Industry"
options={industryOptions}
onchange={handleChange} ></lightning-combobox>
</div>
<p>selectedIndustry:{selectedIndustry}</p>
</lightning-card>
<lightning-card title="getPicklistValues Demo with type">
<div class="slds-var-p-around_medium">
<lightning-combobox
name="Type"
label="Type"
value={selectedType}
placeholder="Select Type"
options={typeOptions}
onchange={handleTypeChange} ></lightning-combobox>
</div>
<p>selectedType:{selectedType}</p>
</lightning-card>
</template>
JS:
import { LightningElement, wire } from 'lwc';
import { getObjectInfo, getPicklistValues} from 'lightning/uiObjectInfoApi'
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry'
import TYPE_FIELD from '@salesforce/schema/Account.Type'
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
export default class GetPIcklistValuesDemo extends LightningElement {
selectedIndustry = '';
selectedType=''
industryOptions=[]
typeOptions=[]
@wire(getObjectInfo, {objectApiName:ACCOUNT_OBJECT})
objectInfo
@wire(getPicklistValues, { recordTypeId:'$objectInfo.data.defaultRecordTypeId', fieldApiName:INDUSTRY_FIELD})
industryPicklist({data, error}){
if(data){
console.log(data)
this.industryOptions = [...this.generatePicklist(data)]
}
if(error){
console.error(error)
}
}
generatePicklist(data){
return data.values.map(item=>({ label: item.label, value: item.value }))
}
handleChange(event) {
this.selectedIndustry = event.detail.value;
}
/***second picklist for type */
@wire(getPicklistValues, { recordTypeId:'$objectInfo.data.defaultRecordTypeId', fieldApiName:TYPE_FIELD})
typePicklist({data, error}){
if(data){
console.log(data)
this.typeOptions = [...this.generatePicklist(data)]
}
if(error){
console.error(error)
}
}
handleTypeChange(event) {
this.selectedType = event.detail.value;
}
}
Component 2: Wire service with getPicklistValuesByRecordType adapter
HTML:
<template>
<lightning-card title="getPicklistValuesByRecordType Adapter">
<div class="slds-var-p-around_medium">
<template if:true={ratingOptions}>
<lightning-combobox
name="rating"
label="Rating"
value={selectedRating}
placeholder="Select Rating"
options={ratingOptions}
onchange={handleChange}></lightning-combobox>
<p>selectedRating: {selectedRating}</p>
</template>
<template if:true={industryOptions}>
<lightning-combobox
name="industry"
label="Industry"
value={selectedIndustry}
placeholder="Select Industry"
options={industryOptions}
onchange={handleChange}></lightning-combobox>
<p>selectedIndustry: {selectedIndustry}</p>
</template>
</div>
</lightning-card>
</template>
JS:
import { LightningElement, wire } from 'lwc';
import {getPicklistValuesByRecordType, getObjectInfo} from 'lightning/uiObjectInfoApi'
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
export default class GetPicklistValuesByRecordTypeDemo extends LightningElement {
ratingOptions
industryOptions
selectedRating
selectedIndustry
@wire(getObjectInfo, {objectApiName:ACCOUNT_OBJECT})
objectInfo
@wire(getPicklistValuesByRecordType, {objectApiName:ACCOUNT_OBJECT,
recordTypeId:'$objectInfo.data.defaultRecordTypeId'})
picklistHandler({data, error}){
if(data){
console.log(data)
this.ratingOptions = this.picklistGenerator(data.picklistFieldValues.Rating)
this.industryOptions = this.picklistGenerator(data.picklistFieldValues.Industry)
}
if(error){
console.error(error)
}
}
picklistGenerator(data){
return data.values.map(item=>({"label":item.label, "value":item.value}))
}
handleChange(event){
const {name, value} = event.target
console.log(name +'==>' +value)
if(name === 'industry'){
this.selectedIndustry = value
}
if(name === 'rating'){
this.selectedRating = value
}
}
}
LWC: event.target vs event.detail
1.When child component trigger an event it comes as detail if event trigger by DOM then comes as target.
2. event.target comes from html element
event.detail comes from custom event we write
I don't understand this from a code point. Both the codes are almost same. We are using combobox with onchange handler in both the components.
Why did we use event.detail in the first component but we used event.target in the second component?
I have two components below. In one component we have event.detail and another we have event.target.
Can someone please explain based on the below code?
Component 1: Wire service with getPicklistValues adapter
HTML:
<template>
<lightning-card title="getPicklistValues Demo">
<div class="slds-var-p-around_medium">
<lightning-combobox
name="Industry"
label="Industry"
value={selectedIndustry}
placeholder="Select Industry"
options={industryOptions}
onchange={handleChange} ></lightning-combobox>
</div>
<p>selectedIndustry:{selectedIndustry}</p>
</lightning-card>
<lightning-card title="getPicklistValues Demo with type">
<div class="slds-var-p-around_medium">
<lightning-combobox
name="Type"
label="Type"
value={selectedType}
placeholder="Select Type"
options={typeOptions}
onchange={handleTypeChange} ></lightning-combobox>
</div>
<p>selectedType:{selectedType}</p>
</lightning-card>
</template>
JS:
import { LightningElement, wire } from 'lwc';
import { getObjectInfo, getPicklistValues} from 'lightning/uiObjectInfoApi'
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry'
import TYPE_FIELD from '@salesforce/schema/Account.Type'
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
export default class GetPIcklistValuesDemo extends LightningElement {
selectedIndustry = '';
selectedType=''
industryOptions=[]
typeOptions=[]
@wire(getObjectInfo, {objectApiName:ACCOUNT_OBJECT})
objectInfo
@wire(getPicklistValues, { recordTypeId:'$objectInfo.data.defaultRecordTypeId', fieldApiName:INDUSTRY_FIELD})
industryPicklist({data, error}){
if(data){
console.log(data)
this.industryOptions = [...this.generatePicklist(data)]
}
if(error){
console.error(error)
}
}
generatePicklist(data){
return data.values.map(item=>({ label: item.label, value: item.value }))
}
handleChange(event) {
this.selectedIndustry = event.detail.value;
}
/***second picklist for type */
@wire(getPicklistValues, { recordTypeId:'$objectInfo.data.defaultRecordTypeId', fieldApiName:TYPE_FIELD})
typePicklist({data, error}){
if(data){
console.log(data)
this.typeOptions = [...this.generatePicklist(data)]
}
if(error){
console.error(error)
}
}
handleTypeChange(event) {
this.selectedType = event.detail.value;
}
}
Component 2: Wire service with getPicklistValuesByRecordType adapter
HTML:
<template>
<lightning-card title="getPicklistValuesByRecordType Adapter">
<div class="slds-var-p-around_medium">
<template if:true={ratingOptions}>
<lightning-combobox
name="rating"
label="Rating"
value={selectedRating}
placeholder="Select Rating"
options={ratingOptions}
onchange={handleChange}></lightning-combobox>
<p>selectedRating: {selectedRating}</p>
</template>
<template if:true={industryOptions}>
<lightning-combobox
name="industry"
label="Industry"
value={selectedIndustry}
placeholder="Select Industry"
options={industryOptions}
onchange={handleChange}></lightning-combobox>
<p>selectedIndustry: {selectedIndustry}</p>
</template>
</div>
</lightning-card>
</template>
JS:
import { LightningElement, wire } from 'lwc';
import {getPicklistValuesByRecordType, getObjectInfo} from 'lightning/uiObjectInfoApi'
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
export default class GetPicklistValuesByRecordTypeDemo extends LightningElement {
ratingOptions
industryOptions
selectedRating
selectedIndustry
@wire(getObjectInfo, {objectApiName:ACCOUNT_OBJECT})
objectInfo
@wire(getPicklistValuesByRecordType, {objectApiName:ACCOUNT_OBJECT,
recordTypeId:'$objectInfo.data.defaultRecordTypeId'})
picklistHandler({data, error}){
if(data){
console.log(data)
this.ratingOptions = this.picklistGenerator(data.picklistFieldValues.Rating)
this.industryOptions = this.picklistGenerator(data.picklistFieldValues.Industry)
}
if(error){
console.error(error)
}
}
picklistGenerator(data){
return data.values.map(item=>({"label":item.label, "value":item.value}))
}
handleChange(event){
const {name, value} = event.target
console.log(name +'==>' +value)
if(name === 'industry'){
this.selectedIndustry = value
}
if(name === 'rating'){
this.selectedRating = value
}
}
}
Though you are getting value from event.target in lightning-combobox, but you as per documentation you should use event.detail
https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/documentation
Now coming back to your question, since LWC is architectured on shadow dom, and if you are listening within same component it hardly matters if you use event.target or event.detail. But event.detail is more broader term which defines the scope of event. So once the event crosses the dom and still if you wish to get the event payload, it comes in detail form. This is because the shadow dom doesn't allow to expose the actual element who fired the event but the event is retargeted to the component dom.
To know more on event.detail or event.target and understand the event retargetting you can refer to following blog
Configuring Events and Propagation in LWC (https://inevitableyogendra.blogspot.com/2021/05/configuring-events-and-propagation-in-lwc.html)
Hope this clarifies your doubt of when to use event.target and when event.detail. If this answers your question, please mark my answer as the best answer. Thanks.