extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
api/js/etemplate/Et2Tree/Et2Tree.ts
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 * @event {{id: String, item:SlTreeItem}} sl-expand emmited when tree item expands
* //TODO add for other events * //TODO add for other events
* @since 23.1.x * @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 export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements FindActionTarget
{ {
@ -903,6 +905,20 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
?disabled=${selectOption.disabled} ?disabled=${selectOption.disabled}
?lazy=${lazy} ?lazy=${lazy}
?focused=${selectOption.focused || nothing} ?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) => { @sl-lazy-load=${(event) => {
// No need for this to bubble up, we'll handle it (otherwise the parent leaf will load too) // No need for this to bubble up, we'll handle it (otherwise the parent leaf will load too)
event.stopPropagation(); event.stopPropagation();

5
api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
View File

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