4

Using lightning-combobox i am able to display required picklist values but trying to achieve below two options.

  1. Allowing users to unselect back to none from the selected value

    As of now if user selects any picklist value there is no way to remove it , is there any quick way to achieve this? Below is the sample code i am running.

<template>
    <lightning-combobox
            name="progress"
            label="Status"
            value={value}
            placeholder="Select State"
            options={StatePicklistValues}
            onchange={handleChange} ></lightning-combobox>

</template>

Javascript sample code:

import { LightningElement, track } from 'lwc';
import ADDRESS_OBJECT from "@salesforce/schema/Address_c";
import STATE_FIELD from "@salesforce/schema/Address_c.State__c";

export default class ComboboxBasic extends LightningElement {
    @track value = 'inProgress';
@wire(getObjectInfo, {
    objectApiName: ADDRESS_OBJECT 
})
objectInfo;

@wire(getPicklistValues, {
    recordTypeId: "$objectInfo.data.defaultRecordTypeId",
    fieldApiName: STATE_FIELD
})
StatePicklistValues;


}

In above code sample on load the component display the place holder text "Select State" but once this is selected there is no way to unselect the value.

  1. Is there a way to change the order of picklist values to be displayed, as of now i am changing the order in object level. Instead of this is there a way i can follow a different order to display the picklist values than defined on object level.

1 Answer 1

6

This cannot be achieved through wired property. You should be using wired function as below:

@track value = '';
@track StatePicklistValues;
@wire(getPicklistValues, {
    recordTypeId: '$objectInfo.data.defaultRecordTypeId',
    fieldApiName: STATE_FIELD
})
getStatePicklistValues(result) {
    if (result.data) {
        console.log(JSON.stringify(result.data));
        this.StatePicklistValues = [ { label: 'Select State', value: '', selected: true }, ...result.data.values ];
    } else if (result.error) {
        alert('ERROR');
    }
}

For sorting, you can do custom sort as follows while assigning:

...result.data.values.sort(function(a, b){return // custom logic});

Note: You should remove placeholder from combobox

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .