fix(fe: FSADT1-1427): Autocomplete emitting value twice

frontend/src/components/forms/AutoCompleteInputComponent.vue

@@ -90,14 +90,15 @@ const inputList = computed<Array<BusinessSearchResult>>(() => {
   return [];
 });
 
-let selectedValue: BusinessSearchResult | undefined = undefined;
-
 //This function emits the events on update
-const emitValueChange = (newValue: string): void => {
-  // Prevent selecting the empty value included when props.contents is empty.
-  selectedValue = newValue
-    ? inputList.value.find((entry) => entry.code === newValue)
-    : undefined;
+const emitValueChange = (newValue: string, isSelectEvent = false): void => {
+  let selectedValue: BusinessSearchResult | undefined;
+  if (isSelectEvent) {
+    // Prevent selecting the empty value included when props.contents is empty.
+    selectedValue = newValue
+      ? inputList.value.find((entry) => entry.code === newValue)
+      : undefined;
+  }
 
   emit("update:model-value", selectedValue?.name ?? newValue);
   emit("update:selected-value", selectedValue);
@@ -124,7 +125,9 @@ watch(
   }
 );
 watch([inputValue], () => {
-  emitValueChange(inputValue.value);
+  if (isUserEvent.value) {
+    emitValueChange(inputValue.value);
+  }
 });
 
 /**
@@ -168,7 +171,7 @@ const validateInput = (newValue: string) => {
 
 const selectAutocompleteItem = (event: any) => {
   const newValue = event?.detail?.item?.getAttribute("data-id");
-  emitValueChange(newValue);
+  emitValueChange(newValue, true);
   validateInput(newValue);
 };
 

frontend/src/pages/staffform/FirstNationClientInformationWizardStep.vue

@@ -75,11 +75,6 @@ watch([autoCompleteResult], () => {
   firstNationControl.value = false;
 });
 
-const updateModelValue = ($event) => {
-  validation.businessName =
-    !!$event && $event === autoCompleteResult.value?.name;
-};
-
 const parseSelectedNation = (
   selectedNation: FirstNationDetailsDto
 ) => {
@@ -129,7 +124,7 @@ const mapFirstNationInfo = (firstNations: ForestClientDetailsDto[] = []) => {
         enabled
         :loading="loading"
         @update:selected-value="autoCompleteResult = parseSelectedNation($event)"
-        @update:model-value="updateModelValue"
+        @update:model-value="validation.businessName = false"
       />
       <cds-inline-loading status="active" v-if="loading">Loading first nation details...</cds-inline-loading>
     </data-fetcher>

frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts

@@ -223,14 +223,30 @@ describe("Auto Complete Input Component", () => {
 
     it('emits the "update:selected-value" with undefined when user types something in the input field', async () => {
       // adding a 'Z' character to the end of the original value so to trigger an update:model-value
-      await wrapper.setProps({ modelValue: "TANGOZ" });
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      wrapper.find<CDSComboBox>(`#${id}`).element._filterInputValue = "TANGOZ";
+      await wrapper.find(`#${id}`).trigger("input");
 
       expect(wrapper.emitted("update:selected-value")).toHaveLength(2);
       expect(wrapper.emitted("update:selected-value")![1][0]).toEqual(
         undefined
       );
     });
 
+    it('doesn\'t emit the "update:selected-value" when the value has been changed from outside', async () => {
+      const expectedCount = 1;
+
+      // Expected count before the update
+      expect(wrapper.emitted("update:selected-value")).toHaveLength(expectedCount);
+
+      // adding a 'Z' character to the end of the original value so to trigger an update:model-value
+      await wrapper.setProps({ modelValue: "TANGOZ" });
+
+      // Expected count after the update
+      expect(wrapper.emitted("update:selected-value")).toHaveLength(expectedCount);
+    });
+
     it('emits the "update:selected-value" with the newly selected value', async () => {
       await wrapper
         .find(`#${id}`)