feat(vue-autocomplete): only prevent default when list is open

closes #464
vuesion · Sep 28, 2019 · 01c4592 · 01c4592
1 parent d7ca660
commit 01c4592
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/app/shared/components/VueAutocomplete/VueAutocomplete.spec.ts b/src/app/shared/components/VueAutocomplete/VueAutocomplete.spec.ts
@@ -142,17 +142,23 @@ describe('VueAutocomplete.vue', () => {
         options: AutocompleteOptionsFixture,
       },
     });
+    const e: any = {
+      preventDefault: jest.fn(),
+    };
 
-    wrapper.vm.onEnterKeyPress();
+    wrapper.vm.onEnterKeyPress(e);
+    expect(e.preventDefault).not.toHaveBeenCalled();
 
     wrapper.vm.searchQuery = 'Test';
     wrapper.vm.selectedOptionIndex = -1;
-    wrapper.vm.onEnterKeyPress();
+    wrapper.setData({ isOpen: true });
+    wrapper.vm.onEnterKeyPress(e);
     expect(wrapper.emitted().change[0][0]).toEqual(AutocompleteOptionsFixture[0]);
+    expect(e.preventDefault).toHaveBeenCalled();
 
     wrapper.vm.searchQuery = 'Test2';
     wrapper.vm.selectedOptionIndex = 1;
-    wrapper.vm.onEnterKeyPress();
+    wrapper.vm.onEnterKeyPress(e);
     expect(wrapper.emitted().change[1][0]).toEqual(AutocompleteOptionsFixture[1]);
   });
 

diff --git a/src/app/shared/components/VueAutocomplete/VueAutocomplete.vue b/src/app/shared/components/VueAutocomplete/VueAutocomplete.vue
@@ -26,7 +26,7 @@
       @input="onInput"
       @keyup.stop.prevent.down="onArrowDown"
       @keydown.stop.prevent.up="onArrowUp"
-      @keydown.stop.prevent.enter="onEnterKeyPress"
+      @keydown.stop.enter.tab="onEnterKeyPress"
       @focus.stop.prevent="onFocus"
     />
 
@@ -248,7 +248,11 @@ export default {
         this.isOpen = false;
       }
     },
-    onEnterKeyPress() {
+    onEnterKeyPress(e: any) {
+      if (this.isOpen) {
+        e.preventDefault();
+      }
+
       if (this.searchQuery.length < this.minInputChars || this.options.length === 0) {
         return;
       }