From 21aec1a93debc91f0fbd11d9f6c8ee2b5484e58b Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Wed, 30 Oct 2024 11:31:58 -0600
Subject: [PATCH] Et2TreeDropdown: Fix readonly & disabled styles Still allowed
 dropdown, and did not look disabled

---
 .../etemplate/Et2Tree/Et2TreeDropdown.styles.ts   | 15 ++++++++++++++-
 api/js/etemplate/Et2Tree/Et2TreeDropdown.ts       | 14 ++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
index 513ee286d9..fcc7ff2d4f 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts
@@ -63,6 +63,7 @@ export default css`
 		justify-content: space-between;
 		vertical-align: middle;
 
+		color: var(--sl-input-color);
 		background-color: var(--sl-input-background-color);
 		border: solid var(--sl-input-border-width) var(--sl-input-border-color);
 
@@ -83,7 +84,15 @@ export default css`
 		align-items: flex-start
 	}
 
-	.tree-dropdown--disabled {
+	:host([readonly]) .tree-dropdown__combobox {
+		background: none;
+		opacity: 1;
+		border: none;
+		outline: none;
+		cursor: not-allowed;
+	}
+
+	.tree-dropdown--disabled, .tree-dropdown--disabled .tree-dropdown__combobox {
 		background-color: var(--sl-input-background-color-disabled);
 		border-color: var(--sl-input-border-color-disabled);
 		color: var(--sl-input-color-disabled);
@@ -92,6 +101,10 @@ export default css`
 		outline: none;
 	}
 
+	.tree-dropdown--disabled .tree-dropdown__expand-icon {
+		cursor: not-allowed;
+		color: var(--sl-input-color-disabled);
+	}
 	:not(.tree-dropdown--disabled).tree-dropdown--open .tree-dropdown__combobox,
 	:not(.tree-dropdown--disabled).tree-dropdown--focused .tree-dropdown__combobox {
 		background-color: var(--sl-input-background-color-focus);
diff --git a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
index 88dd95b009..86929d057e 100644
--- a/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
+++ b/api/js/etemplate/Et2Tree/Et2TreeDropdown.ts
@@ -524,6 +524,10 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 
 	private handleFocus()
 	{
+		if(this.disabled || this.readonly)
+		{
+			return;
+		}
 		this.hasFocus = true;
 		// Should not be needed, but not firing the update
 		this.requestUpdate("hasFocus");
@@ -712,6 +716,11 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 
 	handleTriggerClick(event)
 	{
+		if(this.disabled || this.readonly)
+		{
+			return;
+		}
+
 		event.stopPropagation();
 
 		this.hasFocus = true;
@@ -772,6 +781,10 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
 			const option = this.optionSearch(this.value, this.select_options, 'value', 'children');
 			image = option ? this.iconTemplate(option?.option ?? option) : null;
 		}
+		if(this.disabled || this.readonly)
+		{
+			return html`${image}${this.displayLabel || this.emptyLabel || placeholder}`;
+		}
 		return html`
             ${image}
             <input id="search" type="text" part="input"
@@ -936,6 +949,7 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
                             placement=${this.placement || "bottom"}
 							strategy="fixed"
                             ?disabled=${this.disabled}
+                            ?readonly=${this.readonly}
                             @sl-after-hide=${() => {this.resultsOpen = false;}}
                     >
                         <div