I'm using the <lightning-tree> component to display the list of categories in a public-facing storefront. I'm able to record the selection and perform the steps that I need to take upon the selection (filtering a list of products) in a separate LWC. I am even able to list the category name in a <lightning-pill>.
I'd like to clear the selection when I click the "x" icon on the pill. I'm able to undo the product filters using a handler and dispatch an event from the product listing to the LWC to kick off an action to clear the selected tree node. I don't see a way to do that. In the .js file, my listener is queued up and I can see the message in the console:
clearCatSelect = () => {
console.log('clearCat');
// need to clear the selected tree node
}
Is this possible using the <lightning-tree> component or am i going to have to build out my own using the blueprint in the LDS?
For those who come across this issue, I figured out the solution. In the click/selection handler, I set a class variable to the selected item and dispatched the event:
handleCatSelect(event){
this.selectedCat = event.detail.name;
let send = new CustomEvent('newCatSelected',{
detail: {value: event.detail.name},
bubbles:true
});
this.dispatchEvent(send);
}
In the clear selection handler, I'm setting that variable to an empty string:
clearCatSelect = (e) => {
this.selectedCat = '';
}
In the HTML file, on the <lightning-tree> component definition, I added the selected-item attribute and used the selectedCat variable
<lightning-tree items={cList} header={strTitle} onselect={handleCatSelect} selected-item={selectedCat}></lightning-tree>
Problem solved.
