Lightning-combobox dropdown options not visible on UI

Question

Dropdown options for the lightning combobox are not getting displayed on UI. All values are getting fetched through the standard method getPicklistValuesByRecordType in the Js file of LWC component.

kindly assist me, where and what did I miss in the below snippet: Code for the the UI LWC htmlfile

<lightning-tabset class="slds-tabs_small">
<template for:each={tabList} for:item="tab">
<lightning-tab label={tab.label} key={tab.Index} value={tab.Index} style="margin: 0.5rem;">

<lightning-combobox
label="Field"
options={options} 
required="true">
</lightning-combobox>
</lightning-tab>
</template>
</lightning-tabset>

Handling to display the picklist field values JS file

import { LightningElement,track,wire } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
export default class Test extends LightningElement {
@track tabList = [];
connectedCallback()
{
    console.log('inside getTabs');  
    this.tabList.push(
{
        Index: 0,
        label: 1 + 'Tab',
        TabName: '1st Tab',
        TabNo:1+'st Tab',
     },
{
        Index: 1,
        label: 2 + 'Tab',
        TabName: '2nd Tab',
        TabNo:2+'nd Tab',
       
     },
)
}

@wire(getPicklistValuesByRecordType, { objectApiName: TURBODISP_OBJECT, recordTypeId:'recordtypIdPassedhere' }) 
fetchPicklist({error,data})
{

if(data && data.picklistFieldValues)
{
    data.picklistFieldValues["Field1__c"].values.forEach(optionData => {
       this.options.push({label : optionData.label, value : optionData.value});
   }); 

  console.log('values[]'+ JSON.stringify(this.options));
}
}
}

Expecting dropdown values on UI

It seems you are using picklist values of a single field, have you tried using [getPicklistValues](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_picklist_values) instead? — David Rubin, Apr 30 '23 at 12:36

score 0 · Answer 1 · answered May 02 '23 at 08:05

Dropdown options for the lightning combobox are not getting displayed on UI.

I think there are following things missing in your LWC's JS File:

Import of object schema which you are referencing in this property : TURBODISP_OBJECT.
Declaring options property.

Please try following code snippet in the JS file:

import { LightningElement, track, wire } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import TURBODISP_OBJECT from '@salesforce/schema/<object_api_name>'; //1. change(missing)

export default class Test extends LightningElement {
    @track tabList = [];
    options; //2. change(missing)
    connectedCallback() {
        console.log('inside getTabs');
        this.tabList.push(
            {
                Index: 0,
                label: 1 + 'Tab',
                TabName: '1st Tab',
                TabNo: 1 + 'st Tab',
            },
            {
                Index: 1,
                label: 2 + 'Tab',
                TabName: '2nd Tab',
                TabNo: 2 + 'nd Tab',

            },
        )
    }

    @wire(getPicklistValuesByRecordType, { objectApiName: TURBODISP_OBJECT, recordTypeId: 'recordtypIdPassedhere' })
    fetchPicklist({ error, data }) {

        if (data && data.picklistFieldValues) {
            this.options = new Array(); //Addition
            data.picklistFieldValues["Stream_Opted__c"].values.forEach(optionData => {
                this.options.push({ label: optionData.label, value: optionData.value });
            });
            console.log(JSON.parse(JSON.stringify(this.options)));
        }
    }
}

Lightning-combobox dropdown options not visible on UI

1 Answers1