Make sure Et2TreeDropdown always closes when a tree-item is clicked, even if tree value does not change

This commit is contained in:
nathan 2024-09-20 09:19:34 -06:00
parent bb430d909b
commit 279952d6f6
2 changed files with 21 additions and 0 deletions

View File

@ -75,6 +75,8 @@ export const composedPathContains = (_ev: any, tag?: string, className?: string)
* @event {{id: String, item:SlTreeItem}} sl-expand emmited when tree item expands
* //TODO add for other events
* @since 23.1.x
*
* @event et2-click Emitted when a tree item is clicked. Clicks on the expand / collapse button and other slotted contents are excluded
*/
export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements FindActionTarget
{
@ -903,6 +905,20 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
?disabled=${selectOption.disabled}
?lazy=${lazy}
?focused=${selectOption.focused || nothing}
@click=${async(event) =>
{
// Don't react to expand or children
if(event.target.hasAttribute("slot") || !event.target?.closest("sl-tree-item"))
{
return;
}
await this.updateComplete;
event.target?.closest("sl-tree-item").dispatchEvent(new CustomEvent("et2-click", {
detail: {item: event.target?.closest("sl-tree-item")},
bubbles: true,
composed: true
}));
}}
@sl-lazy-load=${(event) => {
// No need for this to bubble up, we'll handle it (otherwise the parent leaf will load too)
event.stopPropagation();

View File

@ -978,6 +978,11 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
?leafOnly = ${this.leafOnly}
@blur=${this.handleInternalBlur}
@et2-click=${(e) =>
{
// Always hide the popup when a tree item is clicked
this.hide();
}}
@keydown=${this.handleComboboxKeyDown}
@sl-selection-change=${this.handleTreeChange}
>