From fb89581bb592a55e33f9c1d9962776c5cd00ba95 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 13 Dec 2023 13:56:23 -0700
Subject: [PATCH] Et2Email changes & bugfixes - Keep focus in search when
 suggestions arrive - Fix focus went to body when tabbing from search with
 typed address - Don't wrap at top / bottom of suggestion list - Spacing /
 padding fixes

---
 api/js/etemplate/Et2Email/Et2Email.styles.ts |  8 ++++++-
 api/js/etemplate/Et2Email/Et2Email.ts        | 24 +++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/api/js/etemplate/Et2Email/Et2Email.styles.ts b/api/js/etemplate/Et2Email/Et2Email.styles.ts
index 887f38fa46..c0b250eba7 100644
--- a/api/js/etemplate/Et2Email/Et2Email.styles.ts
+++ b/api/js/etemplate/Et2Email/Et2Email.styles.ts
@@ -29,6 +29,8 @@ export default css`
 		min-height: var(--sl-input-height-medium);
 		padding-block: 0;
 		padding-inline: var(--sl-input-spacing-medium);
+		padding-top: 0.1rem;
+		padding-bottom: 0.1rem;
 
 		transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
 		var(--sl-transition-fast) background-color;
@@ -72,11 +74,15 @@ export default css`
 		outline: none;
 
 		font-size: var(--sl-input-font-size-medium);
-		min-height: var(--sl-input-height-medium);
 		padding-block: 0;
 		padding-inline: var(--sl-input-spacing-medium);
 	}
 
+	.form-control--medium .email__search {
+		/* Input same size as tags */
+		height: calc(var(--sl-input-height-medium) * 0.8);
+	}
+
 	.email .email__loading {
 		order: 19;
 	}
diff --git a/api/js/etemplate/Et2Email/Et2Email.ts b/api/js/etemplate/Et2Email/Et2Email.ts
index 35cbfdffd9..d55a646b36 100644
--- a/api/js/etemplate/Et2Email/Et2Email.ts
+++ b/api/js/etemplate/Et2Email/Et2Email.ts
@@ -607,12 +607,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 			this._listbox.hidden = false;
 			this._popup.active = true;
 
-			// Select the appropriate option based on value after the listbox opens
-			requestAnimationFrame(() =>
-			{
-				this.setCurrentOption(this.currentOption);
-			});
-
 			// Make sure the current option is scrolled into view (required for Safari)
 			if(this.currentOption)
 			{
@@ -643,7 +637,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 		// Reset tags to not take focus
 		this.setCurrentTag(null);
 
-		this._search.setSelectionRange(0, 0);
+		this._search.setSelectionRange(this._search.value.length, this._search.value.length);
 	}
 
 	private handleSearchBlur()
@@ -690,10 +684,6 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 		// Tab or enter checks current value
 		else if(Et2Email.TAG_BREAK.indexOf(event.key) !== -1)
 		{
-			// Don't want the key to do its normal ting
-			event.stopPropagation();
-			event.preventDefault();
-
 			// Check for valid email or current selection
 			if(!this.validateAddress(this._search.value.trim()) && this.currentOption)
 			{
@@ -707,6 +697,13 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 			if(event.key == "Tab")
 			{
 				this.blur();
+				// Allow tab to change the focus
+			}
+			else
+			{
+				// Don't want the key to do its normal thing
+				event.stopPropagation();
+				event.preventDefault();
 			}
 		}
 		// Start search immediately
@@ -841,7 +838,7 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 				newIndex = currentIndex + 1;
 				if(newIndex > suggestions.length - 1)
 				{
-					newIndex = 0;
+					newIndex = suggestions.length - 1;
 				}
 			}
 			else if(event.key === "ArrowUp")
@@ -849,7 +846,8 @@ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinI
 				newIndex = currentIndex - 1;
 				if(newIndex < 0)
 				{
-					newIndex = suggestions.length - 1;
+					this.setCurrentOption(null);
+					this._search.focus();
 				}
 			}
 			else if(event.key === "Home")