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 a
character 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;
}
}