Et2TreeDropdown

- Better handling of horizontal space
- Single select closes dropdown immediately
- Selecting tree item actually changes value

api/js/etemplate/Et2Tree/Et2TreeDropdown.styles.ts

@@ -41,8 +41,9 @@ export default css`
 		flex: 1;
 		display: flex;
 		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: center;
+		flex-wrap: nowrap;
+		align-items: flex-start;
+		justify-content: space-between;
 		gap: 0.1rem 0.5rem;
 
 		background-color: var(--sl-input-background-color);
@@ -53,6 +54,7 @@ export default css`
 		min-height: var(--sl-input-height-medium);
 		max-height: calc(var(--height, 5) * var(--sl-input-height-medium));
 		overflow-y: auto;
+		overflow-x: hidden;
 		padding-block: 0;
 		padding-inline: var(--sl-input-spacing-medium);
 		padding-top: 0.1rem;
@@ -80,18 +82,18 @@ export default css`
 
 	/* Trigger */
 
-	.tree-dropdown__trigger {
-		max-width: initial;
-		min-width: initial;
-		flex: 0 0 1em;
-		order: 21;
-		margin-left: auto;
-	}
-
-	.tree-dropdown__trigger::part(base) {
-		border: none;
+	.tree-dropdown__expand-icon {
+		height: var(--sl-input-height-medium);
+		flex: 0 0 auto;
 		display: flex;
 		align-items: center;
+		transition: var(--sl-transition-medium) rotate ease;
+		rotate: 0;
+		margin-inline-start: var(--sl-spacing-small);
+	}
+
+	.tree-dropdown--open .tree-dropdown__expand-icon {
+		rotate: -180deg;
 	}
 
 	/* End trigger */
@@ -100,6 +102,15 @@ export default css`
 		order: 1;
 	}
 
+	/* Tags */
+
+	.tree-dropdown__tags {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	/* End tags */
+
 	/* Search box */
 
 	:host([readonly]) .tree-dropdown__search {
@@ -107,7 +118,7 @@ export default css`
 	}
 
 	.tree-dropdown__search {
-		flex: 1 1 auto;
+		flex: 1 1 7em;
 		order: 10;
 		min-width: 7em;
 		border: none;

api/js/etemplate/Et2Tree/Et2TreeDropdown.ts

@@ -243,6 +243,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
 		this.hasFocus = true;
 		// Should not be needed, but not firing the update
 		this.requestUpdate("hasFocus");
+		this.show();
 
 		// Reset tags to not take focus
 		this.setCurrentTag(null);
@@ -325,8 +326,13 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
 	handleTreeChange(event)
 	{
 		const oldValue = this.value;
-		this.value = this._tree.value;
+		this.value = this._tree.getValue();
 		this.requestUpdate("value", oldValue);
+
+		if(!this.multiple)
+		{
+			this.hide();
+		}
 	}
 
 	handleTriggerClick()
@@ -341,6 +347,11 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
 			this._popup.active = true;
 		}
 		this.open = this._popup.active;
+		this.requestUpdate("open");
+		this.updateComplete.then(() =>
+		{
+			this._tree.focus();
+		})
 	}
 
 	/**
@@ -477,17 +488,16 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
                             <slot part="prefix" name="prefix" class="tree-dropdown__prefix"></slot>
                             <div part="tags" class="tree-dropdown__tags">
                                 ${this.tagsTemplate()}
+                                ${this.inputTemplate()}
                             </div>
-                            ${this.inputTemplate()}
                             ${this.searching ? html`
                                 <sl-spinner class="tree-dropdown"></sl-spinner>` : nothing
                             }
                             <slot part="suffix" name="suffix" class="tree-dropdown__suffix"></slot>
-                            <et2-button caret class="tree-dropdown__trigger"
-                                        @click=${this.handleTriggerClick}
-                                        .noSubmit=${true}
-                            >
-                            </et2-button>
+                            <slot name="expand-icon" part="expand-icon" class="tree-dropdown__expand-icon"
+                                  @click=${this.handleTriggerClick}>
+                                <sl-icon library="system" name="chevron-down" aria-hidden="true"></sl-icon>
+                            </slot>
                         </div>
                         <et2-tree
                                 class="tree-dropdown__tree"
@@ -497,7 +507,7 @@ export class Et2TreeDropdown extends Et2WidgetWithSelectMixin(LitElement)
                                 .value=${this.value}
                                 ._selectOptions=${this.select_options}
 
-                                @change=${this.handleTreeChange}
+                                @sl-selection-change=${this.handleTreeChange}
                         >
                         </et2-tree>
                     </sl-popup>