Update settings autosuggest input

Fixes #374
ethercreative · Jun 26, 2023 · c1a9347 · c1a9347
1 parent d8790cd
commit c1a9347
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 4.0.4 - 2023-06-26
+### Fixed
+- Update settings autosuggest input (Fixes #374)
+
 ## 4.0.3 - 2022-07-11
 ### Fixed
 - Fixed $id embed issue (Fixes #353)

diff --git a/src/templates/settings.twig b/src/templates/settings.twig
@@ -385,35 +385,41 @@ const CraftAutosuggest = {
 			:input-props="inputProps"
 			:limit="limit"
 			@selected="onSelected"
+			@focus="updateFilteredOptions"
+			@blur="onBlur"
+			@input="onInputChange"
+			v-model="inputProps.initialValue"
 		>
 			<template slot-scope="{suggestion}">
 				%{suggestion.item.name || suggestion.item}
-				<span v-if="suggestion.item.hint" class="light">- %{suggestion.item.hint}</span>
+				<span v-if="suggestion.item.hint" class="light">– %{suggestion.item.hint}</span>
 			</template>
 		</vue-autosuggest>
 	</div>`,
 	data () {
 		return {
+			query: '',
 			selected: '',
 			filteredOptions: [],
 			suggestions: window.__mapsCraftAutosuggestSuggestions || [],
 			limit: 5,
 			inputProps: {
 				initialValue: this.value,
 				name: this.name,
-				onInputChange: this.onInputChange,
 			},
 		};
 	},
 	methods: {
-		onInputChange(text) {
-			if (text === '' || text === undefined) {
+		onInputChange(q) {
+			this.query = (q || '').toLowerCase();
+			this.updateFilteredOptions();
+		},
+		updateFilteredOptions() {
+			if (this.query === '') {
 				this.filteredOptions = this.suggestions;
 				return;
 			}
 
-			text = text.toLowerCase();
-
 			var filtered = [];
 			var i, j, sectionFilter, item, name;
 			var that = this;
@@ -423,16 +429,16 @@ const CraftAutosuggest = {
 				for (j = 0; j < this.suggestions[i].data.length; j++) {
 					item = this.suggestions[i].data[j];
 					if (
-						(item.name || item).toLowerCase().indexOf(text) !== -1 ||
-						(item.hint && item.hint.toLowerCase().indexOf(text) !== -1)
+						(item.name || item).toLowerCase().indexOf(this.query) !== -1 ||
+						(item.hint && item.hint.toLowerCase().indexOf(this.query) !== -1)
 					) {
 						sectionFilter.push(item.name ? item : {name: item});
 					}
 				}
 				if (sectionFilter.length) {
 					sectionFilter.sort(function(a, b) {
-						var scoreA = that.scoreItem(a, text);
-						var scoreB = that.scoreItem(b, text);
+						var scoreA = that.scoreItem(a, this.query);
+						var scoreB = that.scoreItem(b, this.query);
 						if (scoreA === scoreB) {
 							return 0;
 						}
@@ -447,17 +453,21 @@ const CraftAutosuggest = {
 
 			this.filteredOptions = filtered;
 		},
-		scoreItem(item, text) {
+		scoreItem(item) {
 			var score = 0;
-			if (item.name.toLowerCase().indexOf(text) !== -1) {
-				score += 100 + text.length / item.name.length;
+			if (item.name.toLowerCase().indexOf(this.query) !== -1) {
+				score += 100 + this.query.length / item.name.length;
 			}
-			if (item.hint && item.hint.toLowerCase().indexOf(text) !== -1) {
-				score += text.length / item.hint.length;
+			if (item.hint && item.hint.toLowerCase().indexOf(this.query) !== -1) {
+				score += this.query.length / item.hint.length;
 			}
 			return score;
 		},
 		onSelected(option) {
+			if (!option) {
+				return;
+			}
+
 			this.selected = option.item;
 
 			// Bring focus back to the input if they selected an alias
@@ -470,6 +480,12 @@ const CraftAutosuggest = {
 		getSuggestionValue(suggestion) {
 			return suggestion.item.name || suggestion.item;
 		},
+		onBlur(e) {
+			// Clear out the autosuggestions if the focus has shifted to a new element
+			if (e.relatedTarget) {
+				this.filteredOptions = [];
+			}
+		},
 	},
 };