pkp/pkp-lib#10624 Convert allowCustom to a prop instead of provide/reject to Autosuggest component

Author: blesildaramirez

src/components/Form/fields/Autosuggest.vue

@@ -103,7 +103,7 @@
 	</Combobox>
 </template>
 <script setup>
-import {useSlots, ref, inject, computed} from 'vue';
+import {useSlots, ref, computed} from 'vue';
 import {
 	Combobox,
 	ComboboxInput,
@@ -157,6 +157,11 @@ const props = defineProps({
 		type: Boolean,
 		default: () => true,
 	},
+	/** If custom items can be selected */
+	allowCustom: {
+		type: Boolean,
+		default: () => false,
+	},
 	/** Field input id, usually used to connect with FormFieldLabel  */
 	inputId: {type: String, required: false, default: null},
 	/** aria-describedby ids */
@@ -189,7 +194,6 @@ const emit = defineEmits([
 	'deselect',
 ]);
 
-const allowCustom = inject('allowCustom', false);
 const localInputValue = ref('');
 const isFocused = ref(false);
 

src/components/Form/fields/FieldBaseAutosuggest.vue

@@ -189,6 +189,11 @@ export default {
 			type: Boolean,
 			default: () => true,
 		},
+		/** If custom items can be selected */
+		allowCustom: {
+			type: Boolean,
+			default: () => false,
+		},
 	},
 	data() {
 		return {
@@ -257,6 +262,7 @@ export default {
 				isDisabled: this.isDisabled,
 				inputId: this.controlId,
 				describedBy: this.describedByIds,
+				allowCustom: this.allowCustom,
 			};
 		},
 	},

src/components/Form/fields/FieldControlledVocab.vue

@@ -1,13 +1,16 @@
 <script>
-import {provide} from 'vue';
 import FieldBaseAutosuggest from './FieldBaseAutosuggest.vue';
 import debounce from 'debounce';
 
 export default {
 	name: 'FieldControlledVocab',
 	extends: FieldBaseAutosuggest,
-	setup() {
-		provide('allowCustom', true);
+	props: {
+		/** An array of options to suggest. */
+		allowCustom: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

src/components/Form/fields/FieldRorAutosuggest.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script setup>
-import {ref, watch, computed, provide} from 'vue';
+import {ref, watch, computed} from 'vue';
 import Autosuggest from './Autosuggest.vue';
 import Icon from '@/components/Icon/Icon.vue';
 import {useFetch} from '@/composables/useFetch';
@@ -70,8 +70,6 @@ const queryParams = computed(() => ({
 	query: inputValue.value,
 }));
 
-provide('allowCustom', true);
-
 const autosuggestContainerId = generateId();
 
 const {
@@ -87,6 +85,7 @@ const staticProps = {
 	selectedLabel: 'Selected',
 	isMultiple: false,
 	describedBy: autosuggestContainerId,
+	allowCustom: true,
 };
 
 const autoSuggestProps = computed(() => ({