From cfbcaf3babdf53ee2685800e20cbaf80dbc01c00 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 18 Sep 2024 11:32:12 -0600
Subject: [PATCH] Et2TreeDropdown: close search results & tree on tab

---
 api/js/etemplate/Et2Tree/Et2TreeDropdown.ts | 22 +++++++++++++++++----
 api/js/etemplate/Et2Widget/SearchMixin.ts   |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
index b476c8bdf7..9ee80b14f0 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
@@ -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>
diff --git a/api/js/etemplate/Et2Widget/SearchMixin.ts b/api/js/etemplate/Et2Widget/SearchMixin.ts
index 6d99027323..060a2d2f17 100644
--- a/api/js/etemplate/Et2Widget/SearchMixin.ts
+++ b/api/js/etemplate/Et2Widget/SearchMixin.ts
@@ -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();