fix: prevent completing business step with invalid data

bcgov · Oct 3, 2023 · 75de0b7 · 75de0b7
1 parent 418cb8a
commit 75de0b7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 // Carbon
-import '@carbon/web-components/es/components/combo-box/index';
+import '@carbon/web-components/es/components/combo-box/index'
 // Composables
 import { useEventBus } from '@vueuse/core'
 // Types
@@ -38,15 +38,18 @@ const revalidateBus = useEventBus<void>('revalidate-bus')
 watch(error, () => emit('error', error.value))
 watch(
   () => props.errorMessage,
-  () => (error.value = props.errorMessage)
+  () => (error.value = props.errorMessage),
 )
 
 //We set the value prop as a reference for update reason
 const inputValue = ref(props.modelValue)
 
 // This is to make the input list contains the selected value to show when component render
 const inputList = computed<Array<BusinessSearchResult>>(() =>
-  ((!props.contents || props.contents.length === 0) ? [{name: props.modelValue, code: '',status:'',legalType:''}] : props.contents).filter(entry => entry.name)
+  (!props.contents || props.contents.length === 0
+    ? [{ name: props.modelValue, code: '', status: '', legalType: '' }]
+    : props.contents
+  ).filter((entry) => entry.name),
 )
 
 let selectedValue: BusinessSearchResult | undefined = undefined
@@ -65,7 +68,7 @@ watch(
   () => {
     inputValue.value = props.modelValue
     validateInput(inputValue.value)
-  }
+  },
 )
 watch([inputValue], () => {
   validateInput(inputValue.value)
@@ -96,39 +99,35 @@ const onTyping = (event: any) => {
 }
 
 revalidateBus.on(() => validateInput(inputValue.value))
-
-watch(() => props.modelValue,() => inputValue.value = props.modelValue)
 </script>
 
-<template>  
+<template>
   <div class="grouping-02">
     <cds-combo-box
       :id="id"
-      :name="id"      
+      :name="id"
       :helper-text="tip"
       :title-text="label"
-      :value="inputValue"      
-filterable
+      :value="inputValue"
+      filterable
       :invalid="error ? true : false"
       :invalid-text="error"
       @cds-combo-box-selected="selectAutocompleteItem"
       v-on:input="onTyping"
-      v-on:blur="(event:any) => validateInput(event.srcElement._filterInputValue)"
+      v-on:blur="(event: any) => validateInput(event.srcElement._filterInputValue)"
       :data-focus="id"
       :data-scroll="id"
       :data-id="'input-' + id"
-      >
-
+    >
       <cds-combo-box-item
         v-for="item in inputList"
         :key="item.code"
         :data-id="item.code"
-        :data-value="item.name" 
-        :value="item.name">
+        :data-value="item.name"
+        :value="item.name"
+      >
         {{ item.name }}
       </cds-combo-box-item>
-
     </cds-combo-box>
   </div>
 </template>
-
diff --git a/frontend/src/pages/bceidform/BusinessInformationWizardStep.vue b/frontend/src/pages/bceidform/BusinessInformationWizardStep.vue
@@ -108,7 +108,7 @@ watch([autoCompleteResult], () => {
   // reset business validation state
   validation.business = false;
 
-  if (autoCompleteResult.value) {
+  if (autoCompleteResult.value && autoCompleteResult.value.code) {
     toggleErrorMessages(false, false);
 
     formData.value.businessInformation.incorporationNumber =
@@ -239,6 +239,7 @@ watch([selectedOption], () => {
         ]"
       :loading="loading"
       @update:selected-value="autoCompleteResult = $event"
+      @update:model-value="validation.business = false"
     />
 
     <cds-inline-loading status="active" v-if="showDetailsLoading">Loading client details...</cds-inline-loading>