extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-21 10:27:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

Et2TreeDropdown: close search results & tree on tab

Browse Source
This commit is contained in:
nathan 2024-09-18 11:32:12 -06:00
parent 1294220e7e
commit cfbcaf3bab
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -575,13 +575,18 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
this.show(); this.show();
} }
private handleSearchBlur(event) private handleInternalBlur(event)
{ {
// Focus lost to some other internal component - ignore it // Focus lost to some other internal component - ignore it
if(event.composedPath().includes(this.shadowRoot)) let o = event.relatedTarget;
while(o)
{
if(o == this.shadowRoot)
{ {
return; return;
} }
o = o.parentNode;
}
this.handleBlur(); this.handleBlur();
} }
@ -589,9 +594,17 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
{ {
super.handleSearchKeyDown(event); super.handleSearchKeyDown(event);
// Show options if popup is closed
if(event.key == "ArrowDown" && !this.open && !this.resultsOpen) if(event.key == "ArrowDown" && !this.open && !this.resultsOpen)
{ {
this.show(); this.show();
event.stopPropagation();
}
// Move to tree if popup is open & tree is showing
else if(event.key == "ArrowDown" && this.treeOrSearch == "tree")
{
this._tree.focus();
event.stopPropagation();
} }
// Left at beginning goes to tags // Left at beginning goes to tags
@ -752,7 +765,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
tabindex="0" tabindex="0"
.value=${this.hasFocus ? "" : this.displayLabel} .value=${this.hasFocus ? "" : this.displayLabel}
@keydown=${this.handleSearchKeyDown} @keydown=${this.handleSearchKeyDown}
@blur=${this.handleSearchBlur} @blur=${this.handleInternalBlur}
@focus=${this.handleSearchFocus} @focus=${this.handleSearchFocus}
@paste=${this.handlePaste} @paste=${this.handlePaste}
/> />
@ -944,6 +957,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
.autoloading="${this.autoloading}" .autoloading="${this.autoloading}"
?leafOnly = ${this.leafOnly} ?leafOnly = ${this.leafOnly}
@blur=${this.handleInternalBlur}
@sl-selection-change=${this.handleTreeChange} @sl-selection-change=${this.handleTreeChange}
> >
</et2-tree> </et2-tree>

2
api/js/etemplate/Et2Widget/SearchMixin.ts
View File

@ -566,7 +566,7 @@ export const SearchMixin = <T extends Constructor<Et2InputWidgetInterface &
this.setCurrentResult(suggestions[newIndex]); this.setCurrentResult(suggestions[newIndex]);
} }
// Close results on escape // Close results on escape
else if(["Escape"].includes(event.key)) else if(["Escape", "Tab"].includes(event.key))
{ {
this.resultsOpen = false; this.resultsOpen = false;
this._searchNode.focus(); this._searchNode.focus();