Callback method setting lightning combobox to previously selected item

Question

I have created a text input box and a dependent lightning-combobox. When user inputs acc in text input box, it iterates over a list (fetched from custom obejct in connectedcallback() method) and filters out items which contains acc substring. This filtered list gets displayed in combobox and user selects a item with label Account. When the user clears out the input provided in text box, this filtered list also gets cleared along with the selected item Account.Till here, it is working as expected.

Now,When the user again types in acharacter in text input box, combobox is automatically gets set to previous selected item Account.

I inspected the code and found that the in aura:proddebug.js, below code gets executed and then combobox is getting set to Account. This should not happen and combobox should get cleared out.

for (let i = 0, len = callbacks.length; i < len; i += 1) {
  callbacks[i]();
}

HTML :

<template>
<lightning-card title="Select Report">
    <p class="slds-p-horizontal--small">
        <lightning-input
            name="enter-search"
            label="Search "
            type="text"
            onchange={handleSearchChange}
        ></lightning-input>
    </p>
    <p class="slds-p-horizontal--small">
        <lightning-combobox
        name="Report List"
        label="Report List"
        value={value}
        placeholder="select report"
        options={reports}
        onchange={handleSelectReportChange}></lightning-combobox>
    </p></lightning-card>
    </template>

JS:

export default class LWCcreateannouncement extends LightningElement {
@api recordId;
@track reportId;
@track reports=[];
@track disableButton = true;
@track error;
allreports=[];

connectedCallback() {
    getReportList()
    .then((result) => {
        this.allreports = result.map((report) => ({ label:report.Name, value:report.Id}));
    })
    .catch((error) => {
        this.error = error; 
    });    
}

handleSearchChange(event) {
    const allReports = this.allreports;
    const searchTerm = event.target.value; 
    if(searchTerm){
        this.reports = allReports.filter(str => {
            return str.label.toLowerCase().includes(searchTerm.toLowerCase());
        });
    } else {   
        this.reportId = '';
        this.reports = [];  
        this.disableButton = true;
    }  

}

handleSelectReportChange(event) {
    this.reportId = event.detail.value;
    if(this.reportId) {
        this.disableButton = false;
    }
}

Answer 1

Try chaging the value={value} property of the Combobox with value={reportId}

I think this should solve the problem as you are blanking this.reportId when you clear the search input.