LWC, handle event null

Question

I have a Parent component which is a data table and a child component that is a combobox For each record in the data table if the user click on an Edit button, then the combobox appear and give the ability to the user to select from a picklist value the one he wants to use.

So I have an event handler HandleEvent that handle the action of changing item selected in the combobox, to test my code and do it step by step. I defined my event that way with a console.log(event.detail.value) and for some reason I get a null !

here is my code: Parent component:

<td class="slds-size_3-of-10" data-label="Prospecting">
                                <div  title="Prospecting">
                                    <template if:false={isEdited}> 
                                        {item.Status}
                                    </template>
                                    <template if:true={isEdited}>
                                        <c-edit-picklist 
                                        unique-key={item.Id}
                                        object-api-name="Lead"
                                        selected-value={item.Status}
                                        onvalueselect={handleSelection}>
                                        </c-edit-picklist>
                                        <!-- <c-lookup-lwc 
                                            unique-key={item.Id} 
                                            value-id={item.JobType__c} 
                                            obj-name="JobType__c" 
                                            icon-name="custom:custom85" 
                                            label-name="JobType" 
                                            onvalueselect={handleSelection}
                                            create-record=true>
                                        </c-lookup-lwc> -->
                                    </template>
                                </div>
                            </td>

child component JS:

import { LightningElement, wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';

export default class EditPicklist extends LightningElement {
    
    value = 'inProgress';
    recordTypeId
    @api objectApiName
    @api selectedValue


    handleChange(event) {
        this.value = event.detail.value;
        console.log(event.target.value)
    }

    options = [
        { label: 'Default 1', value: 'Default1' },
        { label: 'Default 2', value: 'Default2' },
        { label: '--None--', value: "" }
    ]; 

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    getRecordTypeId({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
            if(this.recordTypeId === undefined){
                this.recordTypeId = this.record.defaultRecordTypeId;
            }
            console.log("Default Record Type Id", JSON.stringify(this.record.defaultRecordTypeId));
        } else if (error) {
            this.error = error;
            this.record = undefined;
            console.log("this.error",this.error);
        }
    }

    @wire(getPicklistValuesByRecordType, { recordTypeId: '$recordTypeId', objectApiName: '$objectApiName' })
    wiredOptions({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
            let temp_option = []
            console.log("Picklist", this.record.picklistFieldValues.Status.values)
            this.record.picklistFieldValues.Status.values.forEach((element, index) => {
                var op = {label: element.value}
                temp_option.push(op)
            })
            console.log(temp_option)
            this.options = temp_option
            // if(this.record.picklistFieldValues[this.pickListfieldApiName] !== undefined) {

            //     let tempOptions = [{ label: '--None--', value: "" }];
            //     let temp2Options = this.record.picklistFieldValues[this.pickListfieldApiName].values;
            //     temp2Options.forEach(opt => tempOptions.push(opt));

            //     this.options = tempOptions;
            // }
            // //console.log("this.options pick", JSON.stringify(this.options));
            // if(this.selectedValue === '' || this.selectedValue === undefined || this.selectedValue === null) {
            //     this.value = { label: '--None--', value: "" }.value;
            // } else {
            //     this.value = this.options.find(listItem => listItem.value === this.selectedValue).value;
            // }
        } else if (error) {
            this.error = error;
            this.record = undefined;
            console.log("this.error",this.error);
        }
    }

    

    


}

I have no idea why it is Null and how should I set my HandleChange in order to provide the selected item to the parent component If you could explain that I understand for the future it would be amazing

Thx youuu ;)

Answer 1

You're not building your options correctly in your wire method getPicklistValuesByRecordType for a combobox. You need a value and label.

You're just pushing labels which is why you see the options in the dropdown, but then have nulls (as there's no value you're pushing).

 this.record = data;
            this.error = undefined;
            let temp_option = []
            console.log("Picklist", this.record.picklistFieldValues.Status.values)
            this.record.picklistFieldValues.Status.values.forEach((element, index) => {
                var op = {label: element.value} //here is the culprit, only adding label and no value: 
                temp_option.push(op)
            })

You should be able to do the following:

temp_option.push({
    label: element.value, 
    value: element.value
});

You can tell if it's set correctly (with label + value) in that console log for temp_option.