Et2VfsPath: Fix unable to click on separators, so couldn't get to root

EGroupware · Apr 5, 2024 · 0a5c5a4 · 0a5c5a4
1 parent d87ef46
commit 0a5c5a4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts b/api/js/etemplate/Et2Vfs/Et2VfsPath.styles.ts
@@ -64,7 +64,9 @@ export default css`
 
 	sl-breadcrumb-item::part(separator) {
 		color: var(--input-text-color);
-		margin: 0 var(--sl-spacing-2x-small);
+		margin: 0;
+		padding: 0 var(--sl-spacing-2x-small);
+		cursor: pointer;
 	}
 
 	/* Sizes */

diff --git a/api/js/etemplate/Et2Vfs/Et2VfsPath.ts b/api/js/etemplate/Et2Vfs/Et2VfsPath.ts
@@ -169,13 +169,18 @@ export class Et2VfsPath extends Et2InputWidget(LitElement)
 
 	protected handlePathClick(event : MouseEvent)
 	{
-		if(event.target instanceof SlBreadcrumbItem && event.composedPath().includes(this))
+		let target = event.target;
+		if(target.slot == "separator")
+		{
+			target = target.parentNode;
+		}
+		if(target instanceof SlBreadcrumbItem && event.composedPath().includes(this))
 		{
 			event.preventDefault();
 			event.stopPropagation();
 
-			const dirs = Array.from(event.target.parentElement.querySelectorAll('sl-breadcrumb-item')) ?? [];
-			let stopIndex = dirs.indexOf(event.target) + 1;
+			const dirs = Array.from(target.parentElement.querySelectorAll('sl-breadcrumb-item')) ?? [];
+			let stopIndex = dirs.indexOf(target) + 1;
 			let newPath = dirs.slice(0, stopIndex)
 				// Strip out any extra space
 				.map(d => d.textContent.trim().replace(/\/*$/, '').trim() + "/")
@@ -188,8 +193,13 @@ export class Et2VfsPath extends Et2InputWidget(LitElement)
 			if(!(this.disabled || this.readonly))
 			{
 				const oldValue = this.value;
+				this.value = newPath.join("")
+
 				// No trailing slash in the value
-				this.value = newPath.join("").replace(/\/*$/, '');
+				if(this.value !== "/" && this.value.endsWith("/"))
+				{
+					this.value = this.value.replace(/\/*$/, '');
+				}
 				if(oldValue != this.value)
 				{
 					this.updateComplete.then(() =>
@@ -217,7 +227,7 @@ export class Et2VfsPath extends Et2InputWidget(LitElement)
 		const hasLabel = this.label ? true : !!hasLabelSlot;
 		const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
 		// No trailing slash in the path
-		const pathParts = this.value === "/" ? [""] : this.value
+		const pathParts = this.value === "/" ? ["/"] : this.value
 			// Remove trailing /
 			.replace(/\/*$/, '')
 			.split('/');