Et2TreeDropdown: close search results & tree on tab

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

View File

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

View File

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