From f0c5b9a9585c2fc98996528d16763db52b3e0f39 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:32:08 -0600
Subject: [PATCH 1/5] fix: use portal for dropdown

---
 .../shared/components/search-select.svelte    | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
index 294f58d..1460026 100644
--- a/src/svelte/shared/components/search-select.svelte
+++ b/src/svelte/shared/components/search-select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher, onMount, tick } from "svelte";
 	import Icon from "./icon.svelte";
 
 	export let width = "fit-content";
@@ -10,6 +10,7 @@
 	let isOpen = false;
 	let dropdownRef: HTMLDivElement | null = null;
 	let currentFocusIndex = 0;
+	let inputRef: HTMLInputElement | null = null;
 
 	const dispatch = createEventDispatcher();
 
@@ -21,9 +22,20 @@
 		};
 	});
 
-	function openDropdown() {
+	async function openDropdown() {
 		isOpen = true;
 		inputValue = "";
+
+		await tick();
+
+		if (inputRef && dropdownRef) {
+			const inputRect = inputRef.getBoundingClientRect();
+
+			// Set the dropdown position and width based on inputEl
+			dropdownRef.style.top = `${inputRect.bottom + 6}px`;
+			dropdownRef.style.left = `${inputRect.left}px`;
+			dropdownRef.style.width = `${inputRect.width}px`;
+		}
 	}
 
 	function closeDropdown() {
@@ -104,11 +116,20 @@
 		);
 	}
 
+	function portalAction(
+		node: HTMLElement,
+		parent: HTMLElement = document.body,
+	) {
+		parent = parent || document.body;
+		parent.appendChild(node);
+	}
+
 	$: filteredOptions = fuzzySearch(inputValue);
 </script>
 
 <div class="vault-explorer-search-selection" style={`width: ${width}`}>
 	<input
+		bind:this={inputRef}
 		bind:value={inputValue}
 		placeholder={value || "Search..."}
 		type="text"
@@ -121,7 +142,11 @@
 	>
 
 	{#if isOpen}
-		<div class="vault-explorer-dropdown" bind:this={dropdownRef}>
+		<div
+			class="vault-explorer-dropdown"
+			bind:this={dropdownRef}
+			use:portalAction
+		>
 			{#each filteredOptions as option, i}
 				<div
 					tabindex="-1"
@@ -159,10 +184,8 @@
 
 	.vault-explorer-dropdown {
 		position: absolute;
-		top: calc(100% + 5px);
 		background-color: var(--dropdown-background);
 		box-shadow: var(--input-shadow);
-		width: 100%;
 		max-height: 175px;
 		overflow-y: auto;
 		z-index: 999;

From 67a35723aeef79d7e90df7620608a29cc2431afa Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:50:40 -0600
Subject: [PATCH 2/5] fix: stop loss of input focus on click

---
 .../shared/components/search-select.svelte    | 89 ++++++++++---------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
index 1460026..dc3e795 100644
--- a/src/svelte/shared/components/search-select.svelte
+++ b/src/svelte/shared/components/search-select.svelte
@@ -26,7 +26,7 @@
 		isOpen = true;
 		inputValue = "";
 
-		await tick();
+		await tick(); //Wait for the dropdown to be rendered
 
 		if (inputRef && dropdownRef) {
 			const inputRect = inputRef.getBoundingClientRect();
@@ -44,10 +44,14 @@
 		currentFocusIndex = 0;
 	}
 
+	function handleOptionMouseDown(e: MouseEvent) {
+		e.preventDefault();
+	}
+
 	function handleOptionClick(option: string) {
+		closeDropdown();
 		inputValue = option;
 		value = option;
-		isOpen = false;
 		dispatch("select", { value: option });
 	}
 
@@ -57,45 +61,39 @@
 		currentFocusIndex = 0;
 	}
 
-	function handleInputFocus() {
-		openDropdown();
+	function handleInputClick() {
+		if (isOpen) {
+			closeDropdown();
+		} else {
+			openDropdown();
+		}
 	}
 
 	function handleInputKeyDown(e: KeyboardEvent) {
 		if (e.key === "Tab") {
 			closeDropdown();
-		} else if (e.key === "ArrowDown") {
-			if (!isOpen) {
-				openDropdown();
-				return;
-			}
+			return;
+		}
+
+		if (!isOpen) {
+			openDropdown();
+			return;
+		}
+
+		if (e.key === "ArrowDown") {
 			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 {
-			// open dropdown on any key press
-			if (!isOpen) {
-				openDropdown();
+			const option = filteredOptions[currentFocusIndex];
+			if (option) {
+				handleOptionClick(option);
 			}
 		}
 	}
@@ -103,9 +101,11 @@
 	function handleClickOutside(e: Event) {
 		const targetEl = e.target as HTMLElement;
 		const isInsideClick = targetEl.closest(
-			".vault-explorer-search-selection",
+			".vault-explorer-search-select, .vault-explorer-search-select__dropdown-item",
 		);
+
 		if (!isInsideClick && isOpen) {
+			console.log("clicking outside");
 			closeDropdown();
 		}
 	}
@@ -127,23 +127,23 @@
 	$: filteredOptions = fuzzySearch(inputValue);
 </script>
 
-<div class="vault-explorer-search-selection" style={`width: ${width}`}>
+<div class="vault-explorer-search-select" style={`width: ${width}`}>
 	<input
 		bind:this={inputRef}
 		bind:value={inputValue}
 		placeholder={value || "Search..."}
 		type="text"
 		on:input={handleInputChange}
-		on:focus={handleInputFocus}
+		on:click={handleInputClick}
 		on:keydown={handleInputKeyDown}
 	/>
-	<span class="vault-explorer-dropdown-icon"
+	<span class="vault-explorer-search-select__input-icon"
 		><Icon iconId="chevron-down" size="xs" /></span
 	>
 
 	{#if isOpen}
 		<div
-			class="vault-explorer-dropdown"
+			class="vault-explorer-search-select__dropdown"
 			bind:this={dropdownRef}
 			use:portalAction
 		>
@@ -152,10 +152,11 @@
 					tabindex="-1"
 					role="option"
 					aria-selected={option === value}
-					class="vault-explorer-dropdown-item"
-					class:vault-explorer-dropdown-item--selected={currentFocusIndex ===
+					class="vault-explorer-search-select__dropdown-item"
+					class:vault-explorer-search-select__dropdown-item--selected={currentFocusIndex ===
 						i}
-					on:click={() => handleOptionClick(option)}
+					on:mousedown={handleOptionMouseDown}
+					on:click={(e) => handleOptionClick(option)}
 					on:keydown={() => {}}
 				>
 					{option}
@@ -163,7 +164,7 @@
 			{/each}
 			{#if filteredOptions.length === 0}
 				<div
-					class="vault-explorer-dropdown-item vault-explorer-dropdown-item--empty"
+					class="vault-explorer-search-select__dropdown-item vault-explorer-search-select__dropdown-item--empty"
 				>
 					No results found
 				</div>
@@ -173,16 +174,16 @@
 </div>
 
 <style>
-	.vault-explorer-search-selection {
+	.vault-explorer-search-select {
 		position: relative;
 	}
 
-	.vault-explorer-search-selection input {
+	.vault-explorer-search-select input {
 		cursor: default;
 		max-width: 300px;
 	}
 
-	.vault-explorer-dropdown {
+	.vault-explorer-search-select__dropdown {
 		position: absolute;
 		background-color: var(--dropdown-background);
 		box-shadow: var(--input-shadow);
@@ -196,7 +197,7 @@
 		border-radius: var(--input-radius);
 	}
 
-	.vault-explorer-dropdown-icon {
+	.vault-explorer-search-select__input-icon {
 		position: absolute;
 		top: 50%;
 		right: 10px;
@@ -204,25 +205,25 @@
 		pointer-events: none;
 	}
 
-	.vault-explorer-dropdown-item {
+	.vault-explorer-search-select__dropdown-item {
 		padding: 6px 8px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
 
-	.vault-explorer-dropdown-item--selected {
+	.vault-explorer-search-select__dropdown-item--selected {
 		background-color: var(--color-base-20);
 	}
 
-	.vault-explorer-dropdown-item:hover {
+	.vault-explorer-search-select__dropdown-item:hover {
 		background-color: var(--color-base-30);
 	}
 
-	.vault-explorer-dropdown-item--empty:hover {
+	.vault-explorer-search-select__dropdown-item--empty:hover {
 		background-color: transparent;
 	}
 
-	.vault-explorer-dropdown-item:focus-visible {
+	.vault-explorer-search-select__dropdown-item:focus-visible {
 		box-shadow: inset 0 0 0 2px var(--background-modifier-border-focus);
 	}
 </style>

From 6dba81b3ae8a375491bb2e34a937a622f8aee46e Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 18:52:27 -0600
Subject: [PATCH 3/5] fix: unmount dropdown when parent is removed

---
 src/svelte/shared/components/search-select.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
index dc3e795..396a241 100644
--- a/src/svelte/shared/components/search-select.svelte
+++ b/src/svelte/shared/components/search-select.svelte
@@ -19,6 +19,7 @@
 
 		return () => {
 			document.removeEventListener("click", handleClickOutside);
+			dropdownRef?.remove();
 		};
 	});
 

From d3fd756c9d1fcf3f45e8f846f653caf53f465160 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 19:04:46 -0600
Subject: [PATCH 4/5] fix: add clear button

---
 .../shared/components/search-select.svelte    | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/svelte/shared/components/search-select.svelte b/src/svelte/shared/components/search-select.svelte
index 396a241..8c04da7 100644
--- a/src/svelte/shared/components/search-select.svelte
+++ b/src/svelte/shared/components/search-select.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount, tick } from "svelte";
 	import Icon from "./icon.svelte";
+	import Divider from "./divider.svelte";
 
 	export let width = "fit-content";
 	export let options: string[] = [];
@@ -49,6 +50,10 @@
 		e.preventDefault();
 	}
 
+	function handleOptionClearClick() {
+		handleOptionClick("");
+	}
+
 	function handleOptionClick(option: string) {
 		closeDropdown();
 		inputValue = option;
@@ -62,10 +67,14 @@
 		currentFocusIndex = 0;
 	}
 
-	function handleInputClick() {
-		if (isOpen) {
-			closeDropdown();
-		} else {
+	function handleInputFocus(e: Event) {
+		if (!isOpen) {
+			openDropdown();
+		}
+	}
+
+	function handleInputClick(e: Event) {
+		if (!isOpen) {
 			openDropdown();
 		}
 	}
@@ -106,7 +115,6 @@
 		);
 
 		if (!isInsideClick && isOpen) {
-			console.log("clicking outside");
 			closeDropdown();
 		}
 	}
@@ -136,6 +144,7 @@
 		type="text"
 		on:input={handleInputChange}
 		on:click={handleInputClick}
+		on:focus={handleInputFocus}
 		on:keydown={handleInputKeyDown}
 	/>
 	<span class="vault-explorer-search-select__input-icon"
@@ -163,6 +172,20 @@
 					{option}
 				</div>
 			{/each}
+			{#if filteredOptions.length > 0}
+				<Divider />
+				<div
+					tabindex="-1"
+					role="option"
+					aria-selected="false"
+					class="vault-explorer-search-select__dropdown-item"
+					on:mousedown={handleOptionMouseDown}
+					on:click={(e) => handleOptionClearClick()}
+					on:keydown={() => {}}
+				>
+					Clear
+				</div>
+			{/if}
 			{#if filteredOptions.length === 0}
 				<div
 					class="vault-explorer-search-select__dropdown-item vault-explorer-search-select__dropdown-item--empty"

From 5ccb925a01c5812e3607d32be439d2f070094103 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 19:08:19 -0600
Subject: [PATCH 5/5] chore: bump version

---
 manifest.json | 2 +-
 package.json  | 2 +-
 versions.json | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/manifest.json b/manifest.json
index e2da7c8..20c02a8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.44.4",
+	"version": "1.44.5",
 	"minAppVersion": "1.4.13",
 	"description": "Explore your vault in visual format",
 	"author": "DecafDev",
diff --git a/package.json b/package.json
index 8b1bf81..bebf623 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-vault-explorer",
-	"version": "1.44.4",
+	"version": "1.44.5",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {
diff --git a/versions.json b/versions.json
index ac06f0a..db7c675 100644
--- a/versions.json
+++ b/versions.json
@@ -145,5 +145,6 @@
 	"1.44.1": "1.4.13",
 	"1.44.2": "1.4.13",
 	"1.44.3": "1.4.13",
-	"1.44.4": "1.4.13"
+	"1.44.4": "1.4.13",
+	"1.44.5": "1.4.13"
 }