0

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.

enter image description here

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?

1

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...');
    }

}

|improve this answer|||||
  • Not sure if its only me or the example by op works fine in playground. – Raul Jan 8 at 4:11
  • @sfdcfox shucks....you caught me out. I was trying to show the issue I was having in as simple a way as possible but inadvertently reduced the code to the point you found something else! But, I think your answer has moved things forward. Let me update my question and try to clarify. – Tom Ansley Jan 8 at 4:17
  • @Raul I just checked as well and it seems to work using the constant. Interesting. Regardless, I will update my question per my above comment to sfdcfox – Tom Ansley Jan 8 at 4:20
  • 1
    @TomAnsley Happens to the best of us. It's probably something somewhere else. Let me know when you've updated, I'll take a look. – sfdcfox Jan 8 at 4:21
  • updates are in! – Tom Ansley Jan 8 at 4:56
0

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!

|improve this answer|||||

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.