Add prop on component to manage the behaviour preventDefaultOnEnter

App.vue

@@ -1,12 +1,28 @@
 <template>
   <div class="container">
+    <span>Outside a Form</span>
     <VueTagInput
       v-model="tags"
       :suggestions="suggestions"
       :allow-duplicated="false"
       :only-from-suggestions="false"
       :quick-mode="true"
     />
+    <br>
+    <span>Inside a Form</span>
+    <form>
+      <input
+        type="checkbox"
+        v-model="preventDefaultOnEnter">Prevent default on enter
+      <VueTagInput
+        v-model="tags"
+        :suggestions="suggestions"
+        :allow-duplicated="false"
+        :only-from-suggestions="false"
+        :quick-mode="true"
+        :prevent-default-on-enter="preventDefaultOnEnter"
+      />
+    </form>
   </div>
 </template>
 
@@ -22,6 +38,7 @@ export default {
       tags: [],
       // suggestions: ['Japan', 'Taiwan', 'Africa', 'America', 'Canada', 'Finland', 'China'],
       suggestions: ['中國', '中文', '中午', '中飯'],
+      preventDefaultOnEnter: true,
     };
   },
 };

README.md

@@ -65,8 +65,8 @@ An array of tag objects. Each tag need an `id` and a `text` property which is us
 ```js
 // Recommended: Pass Object 
 [
-  {id: 1, name: 'Apple'},
-  {id: 2, name: 'Banana'},
+  {id: 1, text: 'Apple'},
+  {id: 2, text: 'Banana'},
   ...
 ]
 // Quick: Pass String 
@@ -85,8 +85,8 @@ An array of suggestions that are used as basis for showing autocomplete. Each ta
 ```js
 // Recommended: Pass Object 
 [
-  {id: 1, name: 'Apple'},
-  {id: 2, name: 'Banana'},
+  {id: 1, text: 'Apple'},
+  {id: 2, text: 'Banana'},
   ...
 ]
 // Quick: Pass String 
@@ -138,7 +138,7 @@ Array of characters matching keyboard event key values. This is useful when need
 Default: `false`  
 If set to `true`, it will be possible to add new items only from the autocomplete dropdown.
 
-#### allowDuplicates - {Boolean}
+#### allowDuplicated - {Boolean}
 Default: `false`  
 Allows users to add duplicated tags. If it's `false`, the duplicated tag would play animation with [`errorAninmatedClass`](#errorAninmatedClass---String) to hint the user.
 
@@ -197,6 +197,10 @@ export default {
 </script>
 ```
 
+#### preventDefaultOnEnter - {Boolean}
+Default: `false`  
+Prevent default when user tap ENTER to avoid the form submission.
+
 ## Events
 
 #### add

src/VueTagInput.vue

@@ -110,6 +110,11 @@ export default {
       required: false,
       default: () => ({}),
     },
+    preventDefaultOnEnter: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -197,6 +202,11 @@ export default {
       if (e.keyCode === KEYS.TAB || e.keyCode === KEYS.UP || e.keyCode === KEYS.DOWN) {
         e.preventDefault();
       }
+
+      // prevent ENTER key to keep cursor position in input
+      if (e.keyCode === KEYS.ENTER && this.preventDefaultOnEnter) {
+        e.preventDefault();
+      }
     },
     handleComposition(e) {
       if (e.type === 'compositionend') {