fix: do not prevent the clearing action

bcgov · Oct 10, 2024 · f30c248 · f30c248
1 parent 4e14db6
commit f30c248
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 22 deletions.
diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -192,10 +192,12 @@ const selectAutocompleteItem = (event: any) => {
 };
 
 const preSelectAutocompleteItem = (event: any) => {
-  const newValue = event?.detail?.item?.getAttribute("data-id");
-  emit("click:option", newValue);
-  if (props.preventSelection) {
-    event?.preventDefault();
+  if (event?.detail?.item) {
+    const newValue = event?.detail?.item?.getAttribute("data-id");
+    emit("click:option", newValue);
+    if (props.preventSelection) {
+      event?.preventDefault();
+    }
   }
 };
 

diff --git a/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts b/frontend/tests/unittests/components/forms/AutoCompleteInputComponent.spec.ts
@@ -13,6 +13,7 @@ describe("Auto Complete Input Component", () => {
     { code: "TC", name: "TAMCADA" },
     { code: "TD", name: "TADANARA" },
   ];
+
   const eventSelectContent = (value: string) => {
     return {
       detail: {
@@ -21,6 +22,14 @@ describe("Auto Complete Input Component", () => {
     };
   };
 
+  const eventClearContent = () => {
+    return {
+      detail: {
+        item: undefined,
+      },
+    };
+  };
+
   const setInputValue = async (inputWrapper: DOMWrapper<HTMLInputElement>, value: string) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -309,29 +318,46 @@ describe("Auto Complete Input Component", () => {
     expect(wrapper.emitted("update:selected-value")![0][0]).toEqual(selectedContent);
   });
 
-  it('emits the "click:option" event with the code of the clicked option and prevents selecting it', async () => {
-    const wrapper = mount(AutoCompleteInputComponent, {
-      props: {
-        id,
-        modelValue: "",
-        contents,
-        validations: [],
-        label: id,
-        tip: "",
-        preventSelection: true,
-      },
+  describe("when preventSelection is true", () => {
+    let wrapper: VueWrapper;
+    beforeEach(() => {
+      wrapper = mount(AutoCompleteInputComponent, {
+        props: {
+          id,
+          modelValue: "",
+          contents,
+          validations: [],
+          label: id,
+          tip: "",
+          preventSelection: true,
+        },
+      });
     });
 
-    await wrapper.setProps({ modelValue: "T" });
-    await wrapper.find(`#${id}`).trigger("input");
+    it('emits the "click:option" event with the code of the clicked option and prevents selecting it', async () => {
+      await wrapper.setProps({ modelValue: "T" });
+      await wrapper.find(`#${id}`).trigger("input");
 
-    const code = "TB";
-    await wrapper.find(`#${id}`).trigger("cds-combo-box-beingselected", eventSelectContent(code));
+      const code = "TB";
+      await wrapper.find(`#${id}`).trigger("cds-combo-box-beingselected", eventSelectContent(code));
 
-    expect(wrapper.emitted("click:option")).toBeTruthy();
-    expect(wrapper.emitted("click:option")![0][0]).toEqual(code);
+      expect(wrapper.emitted("click:option")).toBeTruthy();
+      expect(wrapper.emitted("click:option")![0][0]).toEqual(code);
+
+      expect(wrapper.emitted("update:selected-value")).toBeFalsy();
+    });
 
-    expect(wrapper.emitted("update:selected-value")).toBeFalsy();
+    it("doesn't prevent the clearing action", async () => {
+      await wrapper.setProps({ modelValue: "T" });
+      await wrapper.find(`#${id}`).trigger("input");
+
+      // User initiated event to clear the value
+      await wrapper.find(`#${id}`).trigger("cds-combo-box-beingselected", eventClearContent());
+
+      // Clears the value
+      expect(wrapper.emitted("update:selected-value")).toBeTruthy();
+      expect(wrapper.emitted("update:selected-value")![0][0]).toEqual(undefined);
+    });
   });
 
   it('emits the "update:selected-value" event when an option from the list is clicked', async () => {