diff --git a/frontend/src/components/forms/DropdownInputComponent.vue b/frontend/src/components/forms/DropdownInputComponent.vue index 8ed74849bc..43d641a4b9 100644 --- a/frontend/src/components/forms/DropdownInputComponent.vue +++ b/frontend/src/components/forms/DropdownInputComponent.vue @@ -32,13 +32,6 @@ const error = ref(props.errorMessage || '') const revalidateBus = useEventBus('revalidate-bus') -//We watch for error changes to emit events -watch(error, () => emit('error', error.value)) -watch( - () => props.errorMessage, - () => (error.value = props.errorMessage) -) - //We set it as a separated ref due to props not being updatable const selectedValue = ref(props.initialValue) // This is to make the input list contains the selected value to show when component render @@ -58,11 +51,6 @@ const emitValueChange = (newValue: string): void => { emit('update:selectedValue', reference) emit('empty', isEmpty(newValue)) } -//Watch for changes on the input -watch([selectedValue], () => { - validateInput(selectedValue.value) - emitValueChange(selectedValue.value) -}) //We call all the validations const validateInput = (newValue: any) => { @@ -78,12 +66,25 @@ const validateInput = (newValue: any) => { } } -watch(inputList,() => (selectedValue.value = props.initialValue)) - const selectItem = (event:any) => { selectedValue.value = event?.detail?.item?.getAttribute('data-id') } +//Watch for changes on the input +watch([selectedValue], () => { + validateInput(selectedValue.value) + emitValueChange(selectedValue.value) +}) + +watch(inputList,() => (selectedValue.value = props.initialValue)) + +//We watch for error changes to emit events +watch(error, () => emit('error', error.value)) +watch( + () => props.errorMessage, + () => (error.value = props.errorMessage) +) + revalidateBus.on(() => validateInput(selectedValue.value)) diff --git a/frontend/src/components/forms/MultiselectInputComponent.vue b/frontend/src/components/forms/MultiselectInputComponent.vue index a26fa27df0..aedce8f6e4 100644 --- a/frontend/src/components/forms/MultiselectInputComponent.vue +++ b/frontend/src/components/forms/MultiselectInputComponent.vue @@ -7,6 +7,7 @@ import '@carbon/web-components/es/components/tag/index'; import { useEventBus } from '@vueuse/core' // Types import type { CodeNameType } from '@/dto/CommonTypesDto' +import { isEmpty } from '@/dto/CommonTypesDto' //Define the input properties for this component const props = defineProps<{ @@ -33,24 +34,15 @@ const error = ref(props.errorMessage || '') const revalidateBus = useEventBus('revalidate-bus') -//We watch for error changes to emit events -watch(error, () => emit('error', error.value)) -watch( - () => props.errorMessage, - () => (error.value = props.errorMessage) -) - //We set it as a separated ref due to props not being updatable const selectedValue = ref(props.initialValue) +// This is to make the input list contains the selected value to show when component render const inputList = computed>(() => ((!props.modelValue || props.modelValue.length === 0) ? [{name: props.initialValue, code: '',status:'',legalType:''}] : props.modelValue) ) //We set the value prop as a reference for update reason -emit('empty', props.selectedValues ? props.initialValue.length === 0 : true) - -//Watch for changes on the input -watch([selectedValue], () => validateInput(selectedValue.value)) +emit('empty', props.selectedValues ? props.selectedValues.length === 0 : true) //Controls the selected values const items = ref([]) @@ -75,10 +67,6 @@ const validateInput = (newValue: any) => { .shift() ?? props.errorMessage } } -watch( - () => props.modelValue, - () => (selectedValue.value = props.initialValue) -) const emitChange = () => { const reference = props.modelValue.filter((entry) => @@ -104,9 +92,24 @@ const selectItems = (event:any) => { items.value = contentValue.split(',').filter((value:string) => value) } +props.selectedValues?.forEach((value: string) => addFromSelection(value)) + watch([items], () => emitChange()) -props.selectedValues?.forEach((value: string) => addFromSelection(value)) +watch( + () => props.modelValue, + () => (selectedValue.value = props.initialValue) +) + +watch([selectedValue], () => validateInput(selectedValue.value)) + +//We watch for error changes to emit events +watch(error, () => emit('error', error.value)) +watch( + () => props.errorMessage, + () => (error.value = props.errorMessage) +) + validateInput(selectedValue.value) revalidateBus.on(() => validateInput(selectedValue.value)) diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue index 63fec681a2..1d49d1be4c 100644 --- a/frontend/src/pages/FormBCeIDPage.vue +++ b/frontend/src/pages/FormBCeIDPage.vue @@ -476,14 +476,6 @@ const reEval = () => (revalidateBus.emit()) - - Eval - -