From 511889656e02cd283cc59963fd607ab6b8170259 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Mon, 2 Dec 2024 15:30:03 -0700
Subject: [PATCH] Et2Select: Handle focus issue where double-tab was needed
 before you could drop down the options with space or down arrow

---
 api/js/etemplate/Et2Select/Et2Select.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index 0b2c30a270..ecdcf07bce 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -95,6 +95,9 @@ export class Et2WidgetWithSelect extends RowLimitedMixin(Et2WidgetWithSelectMixi
 // @ts-ignore SlSelect styles is a single CSSResult, not an array, so TS complains
 export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 {
+	// Solves some issues with focus
+	static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
+
 	static get styles()
 	{
 		return [
@@ -336,6 +339,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 	connectedCallback()
 	{
 		super.connectedCallback();
+		this.addEventListener("focusin", this.handleFocus);
 		this.updateComplete.then(() =>
 		{
 			this.addEventListener("sl-change", this._triggerChange);
@@ -353,6 +357,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 	{
 		super.disconnectedCallback();
 
+		this.removeEventListener("focusin", this.handleFocus);
 		this.removeEventListener("sl-change", this._triggerChange);
 	}
 
@@ -623,6 +628,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 		return literal`et2-tag`;
 	}
 
+	/** Sets focus on the control. */
+	focus(options? : FocusOptions)
+	{
+		this.handleFocus();
+	}
+
+	/** Removes focus from the control. */
 	blur()
 	{
 		if(typeof super.blur == "function")
@@ -632,6 +644,15 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
 		this.hide();
 	}
 
+	private handleFocus()
+	{
+		if(this.disabled || this.readonly)
+		{
+			return;
+		}
+		this.select?.focus();
+	}
+
 	/**
 	 * Apply the user preference to close the dropdown if an option is clicked, even if multiple=true.
 	 * The default (from SlSelect) leaves the dropdown open for multiple=true