Merge pull request #344 from decaf-dev/fix-folder-dropdown

Fix folder dropdown
2026-07-22 10:10:31 +00:00 · 2024-09-12 17:38:31 -06:00 · 2024-09-12 17:38:31 -06:00 · 91df0e6444
commit 91df0e6444
parent 2c96a13419 9135e915c8
4 changed files with 183 additions and 131 deletions
--- a/src/svelte/app/index.svelte
+++ b/src/svelte/app/index.svelte
@ -1011,4 +1011,8 @@
 		box-shadow: none;
 		padding: 0;
 	}
+
+	.vault-explorer-button:focus-visible {
+		box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
+	}
 </style>
--- a/src/svelte/custom-filter-app/components/folder-filter.svelte
+++ b/src/svelte/custom-filter-app/components/folder-filter.svelte
@ -7,7 +7,7 @@
 	import VaultExplorerPlugin from "src/main";
 	import EventManager from "src/event/event-manager";
 	import { PluginEvent } from "src/event/types";
-	import SearchSelection from "src/svelte/shared/components/search-selection.svelte";
+	import SearchSelect from "src/svelte/shared/components/search-select.svelte";

 	export let index: number;
 	export let id: string;
@ -108,8 +108,8 @@
 		};
 	});

-	function handleValueChange(e: Event) {
-		const value = (e.target as HTMLInputElement).value;
+	function handleValueChange(e: CustomEvent) {
+		const { value } = e.detail;
 		dispatch("ruleValueChange", { id, value });
 	}

@ -135,7 +135,7 @@
 	on:ruleToggle
 >
 	<svelte:fragment slot="after-condition">
-		<SearchSelection options={folders} />
+		<SearchSelect {value} options={folders} on:select={handleValueChange} />
 		<input
 			aria-label="Include subfolders"
 			type="checkbox"
--- a/src/svelte/shared/components/search-selection.svelte
+++ b/src/svelte/shared/components/search-selection.svelte
@ -1,13 +1,17 @@
 <script lang="ts">
-	import { onMount } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import Icon from "./icon.svelte";

 	export let width = "fit-content";
 	export let options: string[] = [];
+	export let value: string = "";

-	let inputValue = "";
-	let selectedValue = "";
-	let showDropdown = false;
+	let inputValue = value;
+	let isOpen = false;
+	let dropdownRef: HTMLDivElement | null = null;
+	let currentFocusIndex = 0;
+
+	const dispatch = createEventDispatcher();

 	onMount(() => {
 		document.addEventListener("click", handleClickOutside);
@ -17,21 +21,68 @@
 		};
 	});

-	function handleOptionClick(e: Event, option: string) {
-		e.stopPropagation();
+	function openDropdown() {
+		isOpen = true;
+		inputValue = "";
+	}
+
+	function closeDropdown() {
+		isOpen = false;
+		inputValue = "";
+		currentFocusIndex = 0;
+	}
+
+	function handleOptionClick(option: string) {
 		inputValue = option;
-		selectedValue = option;
-		showDropdown = false;
+		value = option;
+		isOpen = false;
+		dispatch("select", { value: option });
 	}

 	function handleInputChange(e: Event) {
 		const value = (e.target as HTMLInputElement).value;
 		inputValue = value;
+		currentFocusIndex = 0;
 	}

-	function handleInputClick() {
-		showDropdown = true;
-		inputValue = "";
+	function handleInputFocus() {
+		openDropdown();
+	}
+
+	function handleInputKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowDown") {
+			if (!isOpen) {
+				openDropdown();
+				return;
+			}
+			currentFocusIndex = currentFocusIndex + 1;
+			if (currentFocusIndex == filteredOptions.length) {
+				currentFocusIndex = currentFocusIndex - 1;
+			}
+		} else if (e.key === "ArrowUp") {
+			if (!isOpen) {
+				openDropdown();
+				return;
+			}
+
+			currentFocusIndex = currentFocusIndex - 1;
+			if (currentFocusIndex < 0) {
+				currentFocusIndex = currentFocusIndex = 0;
+			}
+		} else if (e.key === "Enter") {
+			if (isOpen) {
+				const option = filteredOptions[currentFocusIndex];
+				if (option) {
+					handleOptionClick(option);
+				}
+			} else {
+				openDropdown();
+			}
+		} else {
+			if (!isOpen) {
+				openDropdown();
+			}
+		}
 	}

 	function handleClickOutside(e: Event) {
@ -39,9 +90,8 @@
 		const isInsideClick = targetEl.closest(
 			".vault-explorer-search-selection",
 		);
-		if (!isInsideClick && showDropdown) {
-			showDropdown = false;
-			inputValue = "";
+		if (!isInsideClick && isOpen) {
+			closeDropdown();
 		}
 	}

@ -57,29 +107,28 @@
 <div class="vault-explorer-search-selection" style={`width: ${width}`}>
 	<input
 		bind:value={inputValue}
-		placeholder={selectedValue || "Search..."}
+		placeholder={value || "Search..."}
 		type="text"
 		on:input={handleInputChange}
-		on:click={handleInputClick}
+		on:focus={handleInputFocus}
+		on:keydown={handleInputKeyDown}
 	/>
 	<span class="vault-explorer-dropdown-icon"
 		><Icon iconId="chevron-down" size="xs" /></span
 	>

-	{#if showDropdown}
-		<div class="vault-explorer-dropdown">
-			{#each filteredOptions as option}
+	{#if isOpen}
+		<div class="vault-explorer-dropdown" bind:this={dropdownRef}>
+			{#each filteredOptions as option, i}
 				<div
-					tabindex="0"
-					aria-selected={selectedValue === option}
+					tabindex="-1"
 					role="option"
+					aria-selected={option === value}
 					class="vault-explorer-dropdown-item"
-					on:click={(e) => handleOptionClick(e, option)}
-					on:keydown={(e) => {
-						if (e.key === "Enter") {
-							handleOptionClick(e, option);
-						}
-					}}
+					class:vault-explorer-dropdown-item--selected={currentFocusIndex ===
+						i}
+					on:click={() => handleOptionClick(option)}
+					on:keydown={() => {}}
 				>
 					{option}
 				</div>
@ -134,8 +183,12 @@
 		text-overflow: ellipsis;
 	}

+	.vault-explorer-dropdown-item--selected {
+		background-color: var(--color-base-20);
+	}
+
 	.vault-explorer-dropdown-item:hover {
-		background-color: var(--background-modifier-hover);
+		background-color: var(--color-base-30);
 	}

 	.vault-explorer-dropdown-item--empty:hover {
--- a/test-vault/.obsidian/plugins/vault-explorer/data.json
+++ b/test-vault/.obsidian/plugins/vault-explorer/data.json
@ -1,100 +1,95 @@
 {
-  "properties": {
-    "favorite": "favorite",
-    "url": "url",
-    "custom1": "category",
-    "custom2": "color",
-    "custom3": "size",
-    "creationDate": "creation",
-    "modifiedDate": "modification",
-    "createdDate": "creation",
-    "image": "image",
-    "coverImageFit": "image-fit"
-  },
-  "filters": {
-    "search": {
-      "isEnabled": true,
-      "value": ""
-    },
-    "sort": {
-      "isEnabled": true,
-      "value": "modified-desc"
-    },
-    "custom": {
-      "isEnabled": true,
-      "selectedGroupId": "",
-      "groups": []
-    },
-    "properties": {
-      "groups": []
-    }
-  },
-  "views": {
-    "dashboard": {
-      "isEnabled": false
-    },
-    "grid": {
-      "isEnabled": true,
-      "loadSocialMediaImage": true,
-      "coverImageSources": [
-        {
-          "type": "image-property",
-          "isEnabled": true
-        },
-        {
-          "type": "url-property",
-          "isEnabled": true
-        },
-        {
-          "type": "frontmatter",
-          "isEnabled": true
-        },
-        {
-          "type": "body",
-          "isEnabled": true
-        }
-      ],
-      "coverImageFit": "cover"
-    },
-    "list": {
-      "isEnabled": true,
-      "showTags": true
-    },
-    "table": {
-      "isEnabled": true
-    },
-    "feed": {
-      "isEnabled": true,
-      "renderNewLineCharacters": false,
-      "collapseContent": true,
-      "removeLevel1Headers": true,
-      "collapseStyle": "no-new-lines",
-      "lineClampLarge": 5,
-      "lineClampMedium": 3,
-      "lineClampSmall": 2,
-      "removeH1": true
-    },
-    "recommended": {
-      "isEnabled": false
-    },
-    "related": {
-      "isEnabled": false
-    }
-  },
-  "currentView": "grid",
-  "titleWrapping": "normal",
-  "enableClockUpdates": true,
-  "enableFileIcons": true,
-  "loadBodyTags": true,
-  "shouldCollapseFilters": false,
-  "pageSize": 25,
-  "viewOrder": [
-    "grid",
-    "list",
-    "table",
-    "feed"
-  ],
-  "configDir": ".vaultexplorer",
-  "pluginVersion": "1.42.0",
-  "logLevel": "trace"
-}
+	"properties": {
+		"favorite": "favorite",
+		"url": "url",
+		"custom1": "category",
+		"custom2": "color",
+		"custom3": "size",
+		"creationDate": "creation",
+		"modifiedDate": "modification",
+		"createdDate": "creation",
+		"image": "image",
+		"coverImageFit": "image-fit"
+	},
+	"filters": {
+		"search": {
+			"isEnabled": true,
+			"value": ""
+		},
+		"sort": {
+			"isEnabled": true,
+			"value": "modified-desc"
+		},
+		"custom": {
+			"isEnabled": true,
+			"selectedGroupId": "",
+			"groups": []
+		},
+		"properties": {
+			"groups": []
+		}
+	},
+	"views": {
+		"dashboard": {
+			"isEnabled": false
+		},
+		"grid": {
+			"isEnabled": true,
+			"loadSocialMediaImage": true,
+			"coverImageSources": [
+				{
+					"type": "image-property",
+					"isEnabled": true
+				},
+				{
+					"type": "url-property",
+					"isEnabled": true
+				},
+				{
+					"type": "frontmatter",
+					"isEnabled": true
+				},
+				{
+					"type": "body",
+					"isEnabled": true
+				}
+			],
+			"coverImageFit": "cover"
+		},
+		"list": {
+			"isEnabled": true,
+			"showTags": true
+		},
+		"table": {
+			"isEnabled": true
+		},
+		"feed": {
+			"isEnabled": true,
+			"renderNewLineCharacters": false,
+			"collapseContent": true,
+			"removeLevel1Headers": true,
+			"collapseStyle": "no-new-lines",
+			"lineClampLarge": 5,
+			"lineClampMedium": 3,
+			"lineClampSmall": 2,
+			"removeH1": true
+		},
+		"recommended": {
+			"isEnabled": false
+		},
+		"related": {
+			"isEnabled": false
+		}
+	},
+	"currentView": "grid",
+	"titleWrapping": "normal",
+	"enableClockUpdates": true,
+	"enableFileIcons": true,
+	"loadBodyTags": true,
+	"shouldCollapseFilters": false,
+	"pageSize": 25,
+	"viewOrder": ["grid", "list", "table", "feed"],
+	"configDir": ".vaultexplorer",
+	"pluginVersion": "1.44.2",
+	"logLevel": "trace"
+}