[SalesForce] LWC: how to clear previous selection from lightning-combobox

I have a data entry form using lighting-input and lightning-combobox. When the user submits the form, I want to clear all fields so the user can make a new entry.

I'm using querySelectorAll and looping through each input and combobox element to set value to blank. The input fields are cleared successfully, but the combobox fields are not cleared and the entries from the previous submission are still there.

How do I clear the combobox fields? I've tried various combinations of each.value and each.setValue() but nothing works.

Here's the relevant html:

<template>
    <template if:false={isComplete}>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="firstName" label="First Name" required></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="lastName" label="Last Name" required></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="zip" label="Zip Code" class="spec-req"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="mobile" label="Mobile" type="phone" class="spec-req"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="email" label="Email" type="email" class="spec-req"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="orgAffiliation" label="Org Affiliation"></lightning-input>
            </div>
            <div class="slds-col slds-size_1-of-3">
                <lightning-input data-formfield="youth" label="Number of Youth" type="number"></lightning-input>
            </div>
            <template if:true={veteranStatusOptions.data}>
                <div class="slds-col slds-size_1-of-3">
                    <lightning-combobox data-formfield="veteranStatus" label="Veteran Status" value={veteranStatus} options={veteranStatusOptions.data.values} onchange={handleStatusChange} placeholder="-select-" required></lightning-combobox>
                </div>
            </template>
            <div class="slds-col slds-size_1-of-3">
                <lightning-combobox data-formfield="waiver" label="Agree to Waive" value={waiver} options={yesnoOptions} onchange={handleWaiverChange} placeholder="-select-" required></lightning-combobox>
            </div>
        </div>
    </template>

</template>

Here's the relevant JS:

// Clear variables and form for the next entry.
handleContinueEntry() {
    this.template.querySelectorAll('lightning-input').forEach(each => {
        each.value = '';
    });
    this.template.querySelectorAll('lightning-combobox').forEach(each => {
        each.value = null;
    });
}

Here's the screenshot after clearing the fields:

eb

Best Answer

As I can see from your code, You Combobox are binded to two JS variables

{veteranStatus} and {waiver}

You have to make them as Null as well

this.veteranStatus = null;
this.waiver = null;
Related Topic