Change lightning combobox value programmatically in javascript

Question

i'm facing an issue with the lightning-combobox standard comoponent. I can't achieve to change it's value programmatically.

I use the following code :

Markup :

<lightning-combobox
class="start-select"
label="Select Start"
options={startOptions}
onchange={handleOvertimeStartChange} ></lightning-combobox>

And my code to change to value :

const startSelect = this.template.querySelector(".start-select");
if (startSelect) {
    startSelect.value = this.startValue;
}

but the selected value of the combobox doesn't change on the UI.

Any clue about that ?

Thanks in advance

Answer 1

If startValue does not have a value which is one of the options in startOptions, then it will not work.

You can try below in your component which will work:

HTML:

<template>
    <lightning-button label="Change Select" onclick={changeSelect}></lightning-button>
    <lightning-combobox
                        class="start-select"
                        label="Select Start"
                        options={startOptions}
                        onchange={handleOvertimeStartChange}></lightning-combobox>
</template>

JS:

import { LightningElement, wire, api, track } from 'lwc';
import Parent from 'c/parent';

export default class Poc extends Parent {
    @track
    startOptions = [
        { label: 'New', value: 'new' },
        { label: 'In Progress', value: 'inProgress' },
        { label: 'Finished', value: 'finished' }
    ];

    changeSelect() {
        const startSelect = this.template.querySelector('.start-select');
        if (startSelect) {
            startSelect.value = 'inProgress';
        }
    }
}

Notice that inProgress is one of the options so it will work.