LWC -lightning-combobox not showing dropdown list

Question

I have a page with the following two lightning components inside a for:each -

<template for:each={selectedConfig.attributes} for:item="attrib">

     <template if:false={attrib.isPicklist}>
         <lightning-input type={attrib.webType} 
                          variant="label-hidden" 
                          name={attrib.externalName} 
                          onchange={handleValueUpdate}
                          placeholder={attrib.placeHolder}
                          pattern={attrib.textPattern}
                          value={attrib.value}>
         </lightning-input>
     </template>

     <template if:true={attrib.isPicklist}>
          <lightning-combobox name={attrib.externalName}
                             value={attrib.value} 
                             onchange={handleValueUpdate} 
                             options={attrib.picklistValues}>
         </lightning-combobox>
     </template>

</template>

The lightning-input component works great. The lightning-combobox does not. The combobox displays but does not show any default value, only the placeholder text. Also, when I click on the combobox it will not show me the list of values or allow me to select anything else.

It's like the combobox is readonly!

Client side javascript controller is as follows -

import getSelectedConfig from '@salesforce/apex/myUIController.getSelectedConfig';

export default class myUIProcess extends LightningElement {    
        @track error;
        @track selectedConfigOption;
        @track selectedConfig;

        @wire(getSelectedConfig, { processName: '$selectedConfigOption' })
        wiredSelectedConfigOption({ error, data }) {
            if (data) {  this.selectedConfig = data; this.error = undefined;}
            else if (error) { this.error = error; }
        }

        handleValueUpdate(event) {
            console.log('Do stuff.');
        }

    }

A few thoughts -

1. It works great for the input field so in my mind all the attrib data is available.
2. The attrib data is not read-only as I am able to input values (using the lightning-input component) and the values are retrieved and handled as expected.
3. I have used debugging on the back end Apex controller and the attrib.picklistValues are being picked up and returned as expected.
4. The attrib.getPicklistValues() method on the backend controller is @AuraEnabled (cacheable=true)

Anybody have an idea what the issue might be?

Answer 1

I finally figured this one out! It had to do with not showing enough code in my initial example as I can guarantee someone would have spotted it. Here is the code I was working from -

     <div class="slds-truncate" title={attrib.value}>
         <template if:true={attrib.allowOverrides}>
             <template if:true={attrib.isPicklist}>
                 <lightning-combobox name={attrib.externalName}
                                     value={attrib.value} 
                                     onchange={handleValueUpdate} 
                                     options={attrib.picklistValues}>
                 </lightning-combobox>
             </template>
         </template>
     </div>

The issue was that I needed to remove the class='slds-truncate'. Once I did that the drop down list was allowed to show over HTML elements below it and everything worked as expected.

Easy fix. Hopefully this will help someone else!

Answer 2

You should specify the value as an attribute that can be modified. Here's your code, modified:

<template>
    <lightning-combobox name="myLightningComboBox"
                    value={value}
                    onchange={handleValueUpdate} 
                    options={statusOptions}>
    </lightning-combobox>
</template>

---

import { track, LightningElement } from 'lwc';

export default class App extends LightningElement {    
    @track statusOptions = [
        {value: 'new', label: 'New'},
        {value: 'in-progress', label: 'In Progress'},
        {value: 'finished', label: 'Finished'}
    ];
    @track value = 'new';

    handleValueUpdate(event) {
        console.log('Do something...');
    }

}

---