Fix search-suggestion substring-highlight using overly-new input

3 files changed, 12 insertions, 7 deletions

diff --git a/src/App.vue b/src/App.vue
index e17acfc..f67cbb1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -118,7 +118,7 @@ function getDefaultLytOpts(): LayoutOptions {
 		rectSensitivity: 0.9, // Between 0 and 1
 		sweepMode: 'left', // 'left' | 'top' | 'shorter' | 'auto'
 		sweptNodesPrio: 'sqrt', // 'linear' | 'sqrt' | 'pow-2/3'
-		sweepToParent: 'prefer', // 'none' | 'prefer' | 'fallback'
+		sweepToParent: 'fallback', // 'none' | 'prefer' | 'fallback'
 	};
 }
 function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 2844f5e..cb062e3 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -49,13 +49,15 @@ export default defineComponent({
 	},
 	data(){
 		return {
-			// For search-suggestion requests
-			lastSuggReqTime: 0, // Set when a search-suggestions request is initiated
-			pendingSuggReqParams: '', // Used by a search-suggestion requester to use the latest user input
-			pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request
 			// Search-suggestion data
 			searchSuggs: [] as SearchSugg[],
 			searchHadMoreSuggs: false,
+			suggsInput: '', // The input that resulted in the current suggestions (used to highlight matching text)
+			// For search-suggestion requests
+			lastSuggReqTime: 0, // Set when a search-suggestions request is initiated
+			pendingSuggReqParams: '', // Used by a search-suggestion requester to request with the latest user input
+			pendingDelayedSuggReq: 0, // Set via setTimeout() for a non-initial search-suggestions request
+			pendingSuggInput: '', // Used to remember what input triggered a suggestions request
 			// Other
 			focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys
 		};
@@ -70,7 +72,7 @@ export default defineComponent({
 		},
 		suggDisplayStrings(): [string, string, string][] {
 			let result: [string, string, string][] = [];
-			let input = (this.$refs.searchInput as HTMLInputElement).value;
+			let input = this.suggsInput;
 			// For each SearchSugg
 			for (let sugg of this.searchSuggs){
 				let idx = sugg.name.indexOf(input);
@@ -108,7 +110,9 @@ export default defineComponent({
 			urlParams += this.uiOpts.useReducedTree ? '&rtree=true' : '';
 			// Query server, delaying/skipping if a request was recently sent
 			this.pendingSuggReqParams = urlParams;
+			this.pendingSuggInput = input.value;
 			let doReq = async () => {
+				let suggInput = this.pendingSuggInput;
 				let responseObj: SearchSuggResponse =
 					await getServerResponse(this.pendingSuggReqParams);
 				if (responseObj == null){
@@ -116,6 +120,7 @@ export default defineComponent({
 				}
 				this.searchSuggs = responseObj.suggs;
 				this.searchHadMoreSuggs = responseObj.hasMore;
+				this.suggsInput = suggInput;
 				// Auto-select first result if present
 				if (this.searchSuggs.length > 0){
 					this.focusedSuggIdx = 0;
diff --git a/src/components/Tile.vue b/src/components/Tile.vue
index 2a59d94..73a818a 100644
--- a/src/components/Tile.vue
+++ b/src/components/Tile.vue
@@ -354,7 +354,7 @@ export default defineComponent({
 			};
 		},
 		infoIconClasses(): string {
-			return 'text-white/10 hover:text-white hover:cursor-pointer';
+			return 'text-white/20 hover:text-white hover:cursor-pointer';
 		},
 		// For watching layoutNode data
 		pos(){