fix: fixing multi select

frontend/src/components/forms/DropdownInputComponent.vue

@@ -32,13 +32,6 @@ const error = ref<string | undefined>(props.errorMessage || '')
 
 const revalidateBus = useEventBus<void>('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))
 </script>
 

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<string | undefined>(props.errorMessage || '')
 
 const revalidateBus = useEventBus<void>('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<Array<CodeNameType>>(() =>
   ((!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<string[]>([])
@@ -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))
 </script>

frontend/src/pages/FormBCeIDPage.vue

@@ -476,14 +476,6 @@ const reEval = () => (revalidateBus.emit())
           <LogOut16 slot="icon" />
         </cds-button>
 
-        <cds-button
-            kind="tertiary"
-            size="lg"            
-            v-on:click="reEval"            
-          >
-          <span>Eval</span>
-        </cds-button>
-
         </div>
       </div>