How to reset child combo box values on button click in parent LWC

Question

I have Parent component LWC where I am displaying account records in html table and having filters for picklist where I have used combo box(Util combo box) . When I select the values in picklist it should filter my account records based picklist value selection. When I click the clearfilter button ,filter needs to be cleared and display all account records.

Parent HTML code:
    <lightning-button label="Clear Filter" variant="brand" onclick={handleClear}></lightning-button>
<template for:each={picklists} for:item="picklist">
    <td colspan="1" key={picklist.dataId}>
        <c-picklist object-api-name={picklist.objectApiName} field-api-name={picklist.fieldApiName}
        placeholder={picklist.placeholder} d-id={picklist.dataId} records={records}
        onpicklistfiltered={picklistFilteredRecords}>
        </c-picklist>
    </td>
</template>

Parent JS

import { LightningElement, api, track, wire } from "lwc";
import Account_Object from "@salesforce/schema/Account";
import Type from "@salesforce/schema/Account.Type__c";
import Status from "@salesforce/schema/Account.Status__c";

export default class RiskManagment extends LightningElement {    
    picklists = [];
   @track objectApiName = Account_Object;
   
    connectedCallback() {      
       this.picklists.push({objectApiName: this.objectApiName,fieldApiName: Type,dataId: "Type__c",placeholder: "Type"});
       this.picklists.push({objectApiName: this.objectApiName,fieldApiName: Status,dataId: "Status__c",placeholder: "Status"});
        
    }
    handleClear(){     
     this.accData = result;
   }
}

CHILD Component:

<template>
    <lightning-card>
        <template if:true={isLoaded}>
            <lightning-combobox data-id={dId} options={picklistOptions} placeholder={placeholder}
                onchange={handleSearchChange} value={pklValue}>
            </lightning-combobox>
        </template>
</lightning-card>
</template>

Based on picklist value selection my account records get filtered properly. When I click clearfilter button records get reset but not actually the value I selected in my lightning combo box . Please provide any suggestions

Thanks in advance

Answer 1

Create a public method in child LWC that clears the value selected in lightning combo box.

@api clearSelectedValue(){
    //logic to clear the selected value
}

On parent, on click of Clear Filter button, call this child method.

this.template.querySelector('c-picklist')?.clearSelectedValue()

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/create_javascript_methods