1

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

3
  • yeah this will do, Thanks! I completely missed this rather simple part. – devforce Jan 20 '20 at 12:49
  • But, do you know why this callback method getting executed – devforce Jan 20 '20 at 12:51
  • Hello, I have no idea of why. – ivan Jan 20 '20 at 13:05

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.