0

enter image description hereI 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 ;)

4
  • If the user selected --None--, it should be null. Are you saying it's null no matter what they select? The comobobox/change handler should work just fine as is.. See this example with your options you can play around with. No issues getting the value on change assuming the label you selected has a value. Apr 14, 2021 at 13:10
  • 1
    Which one is null event.detail.value or event.target.value? Apr 14, 2021 at 13:12
  • if the user selected --None-- this part is in comment, yes it is null whatever I select both event.detail.value and event.targer.value give me a null result I added a short video to show you
    – Ben2pop
    Apr 14, 2021 at 13:23
  • It looks like on the first Onchange it gives Null and then nothing it is kind of frozen
    – Ben2pop
    Apr 14, 2021 at 13:27

1 Answer 1

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.

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.