Revert "pkp/pkp-lib#10624 Move methods from FieldBaseAutosuggest to u…

…seAutosuggest API"

This reverts commit b23bbdc.

src/components/Form/fields/Autosuggest.vue

@@ -34,9 +34,9 @@
 			ref="autosuggestInput"
 			class="pkpAutosuggest__input"
 			v-bind="inputProps"
-			@change="(event) => handleChange(event)"
-			@focus="() => handleFocus()"
-			@blur="() => handleBlur()"
+			@change="(event) => handleChange(event, emit)"
+			@focus="() => handleFocus(emit)"
+			@blur="() => handleBlur(emit)"
 		/>
 		<ComboboxOptions
 			v-if="suggestions.length || (allowCustom && localInputValue?.length)"
@@ -77,7 +77,7 @@
 	</Combobox>
 </template>
 <script setup>
-import {useSlots, ref, inject} from 'vue';
+import {useSlots} from 'vue';
 import {
 	Combobox,
 	ComboboxInput,
@@ -86,10 +86,11 @@ import {
 } from '@headlessui/vue';
 import PkpBadge from '@/components/Badge/Badge.vue';
 import Icon from '@/components/Icon/Icon.vue';
+import {useAutosuggest} from '@/composables/useAutosuggest';
 
 const slots = useSlots();
 
-const props = defineProps({
+defineProps({
 	id: {
 		type: String,
 		required: true,
@@ -116,20 +117,14 @@ const props = defineProps({
 	},
 	isDisabled: {
 		type: Boolean,
-		default: () => false,
+		default() {
+			return false;
+		},
 	},
 	deselectLabel: {
 		type: String,
 		required: true,
 	},
-	inputValue: {
-		type: String,
-		default: () => '',
-	},
-	isFocused: {
-		type: Boolean,
-		default: () => false,
-	},
 });
 
 const emit = defineEmits([
@@ -139,24 +134,8 @@ const emit = defineEmits([
 	'deselect',
 ]);
 
-const allowCustom = inject('allowCustom', false);
-const localInputValue = ref('');
-const localIsFocused = ref(props.isFocused);
-
-function handleChange(event) {
-	localInputValue.value = event.target.value.trim();
-	emit('update:inputValue', localInputValue.value);
-}
-
-function handleFocus() {
-	localIsFocused.value = true;
-	emit('update:isFocused', localIsFocused.value);
-}
-
-function handleBlur() {
-	localIsFocused.value = false;
-	emit('update:isFocused', localIsFocused.value);
-}
+const {allowCustom, localInputValue, handleChange, handleFocus, handleBlur} =
+	useAutosuggest();
 
 function selectSuggestion(suggestion) {
 	emit('select-suggestion', suggestion);

src/components/Form/fields/FieldBaseAutosuggest.vue

@@ -85,10 +85,7 @@
 					v-bind="autoSuggestProps"
 					ref="cb"
 					v-model:inputValue="inputValue"
-					v-model:suggestions="suggestions"
 					v-model:isFocused="isFocused"
-					v-model:currentSelected="currentSelected"
-					v-model:currentValue="currentValue"
 					@select-suggestion="selectSuggestion"
 					@deselect="deselect"
 				>
@@ -119,17 +116,16 @@
 </template>
 
 <script>
-import {reactive} from 'vue';
 import FieldBase from './FieldBase.vue';
 import Autosuggest from './Autosuggest.vue';
 import FormFieldLabel from '@/components/Form/FormFieldLabel.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
 import HelpButton from '@/components/HelpButton/HelpButton.vue';
 import FieldError from '@/components/Form/FieldError.vue';
 import MultilingualProgress from '@/components/MultilingualProgress/MultilingualProgress.vue';
-import {useAutosuggest} from '@/composables/useAutosuggest';
 
 import ajaxError from '@/mixins/ajaxError';
+import debounce from 'debounce';
 
 export default {
 	name: 'FieldBaseAutosuggest',
@@ -271,45 +267,27 @@ export default {
 			var direction = document.body.getAttribute('dir');
 			return direction === 'rtl';
 		},
+		autoSuggestProps() {
+			return {
+				id: this.autosuggestId,
+				inputProps: this.inputProps,
+				suggestions: this.suggestions,
+				selectedLabel: this.selectedLabel,
+				currentValue: this.currentValue,
+				currentSelected: this.currentSelected,
+				isDisabled: this.isDisabled,
+				deselectLabel: this.deselectLabel,
+			};
+		},
 	},
 	watch: {
 		inputValue(newVal, oldVal) {
 			if (newVal === oldVal) {
 				return;
 			}
-
-			this.state.inputValue = newVal;
-			this.getSuggestions(this.getParams);
+			this.getSuggestions();
 		},
 	},
-	created() {
-		const opts = {
-			id: this.autosuggestId,
-			inputProps: this.inputProps,
-			suggestions: this.suggestions,
-			selectedLabel: this.selectedLabel,
-			isMultiple: this.isMultiple,
-			currentValue: this.currentValue,
-			name: this.name,
-			isDisabled: this.isDisabled,
-			deselectLabel: this.deselectLabel,
-			apiUrl: this.apiUrl,
-			isMultilingual: this.isMultilingual,
-		};
-
-		this.state = reactive({
-			inputValue: this.inputValue,
-			currentSelected: this.currentSelected,
-		});
-
-		const {autoSuggestProps, getSuggestions, selectSuggestion, deselect} =
-			useAutosuggest(this.state, opts, this.$emit, this.setSuggestions);
-
-		this.autoSuggestProps = autoSuggestProps;
-		this.getSuggestions = getSuggestions;
-		this.selectSuggestion = selectSuggestion;
-		this.deselect = deselect;
-	},
 	mounted() {
 		// Inline labels can not be used with multilingual fields
 		if (this.isMultilingual && this.isLabelInline) {
@@ -320,6 +298,20 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * Remove an item from the selected list
+		 *
+		 * @param {Object} itemToRemove
+		 */
+		deselect(itemToRemove) {
+			let newSelected = [...this.currentSelected];
+			newSelected.splice(
+				newSelected.findIndex((item) => item.value === itemToRemove.value),
+				1,
+			);
+			this.setSelected(newSelected);
+		},
+
 		/**
 		 * Move focus to the input field
 		 */
@@ -331,6 +323,82 @@ export default {
 			this.$refs.cb.$refs.autosuggestInput.$el.focus();
 		},
 
+		/**
+		 * Get suggestions from the API url
+		 */
+		getSuggestions: debounce(function () {
+			if (!this.inputValue) {
+				this.suggestions = [];
+				return;
+			}
+			var self = this;
+			$.ajax({
+				url: this.apiUrl,
+				type: 'GET',
+				data: {
+					...this.getParams,
+					searchPhrase: this.inputValue,
+				},
+				error(r) {
+					self.ajaxErrorCallback(r);
+				},
+				success(r) {
+					self.setSuggestions(r.items);
+				},
+			});
+		}, 250),
+
+		/**
+		 * Add a suggested item to the list of selected items
+		 *
+		 * This method may be called without a null item argument
+		 * when the user types into the field and hits enter. In
+		 * such cases, select the first autosuggestion result if
+		 * one exists
+		 *
+		 * @param {Object|null} item The item that was selected
+		 */
+		select(item) {
+			if (!item) {
+				if (!this.inputValue || !this.suggestions.length) {
+					return;
+				}
+				item = this.suggestions[0];
+			}
+			this.setSelected([...this.currentSelected, item]);
+			this.inputValue = '';
+		},
+
+		/**
+		 * Respond to selected events from vue-autosuggest
+		 *
+		 * This wrapper passes the selected item to the select method.
+		 *
+		 * @param {Object|null} suggestion
+		 */
+		selectSuggestion(suggestion) {
+			this.select(suggestion ? suggestion : null);
+		},
+
+		/**
+		 * Emit events to change the selected items and the field's value
+		 */
+		setSelected(selected) {
+			if (selected?.length > 1 && !this.isMultiple) {
+				// override selected value if only one option can be selected
+				selected = [selected[1]];
+			}
+
+			this.$emit('change', this.name, 'selected', selected, this.localeKey);
+			this.$emit(
+				'change',
+				this.name,
+				'value',
+				selected.map((s) => s.value),
+				this.localeKey,
+			);
+		},
+
 		/**
 		 * This must be implemented in a component that extends
 		 * this component