title: How to prevent option to be deselected when pressed key enter in vue multiselect?
body: <p>I have a component that uses Multiselect from @vueform/multiselect. The problem is when the user selects an option and the tag is created, if enter is pressed it will deselect that option. How am I able to control that? I tried adding <code>@keydown.enter.prevent=&quot;deselect&quot;</code> but it doesn't work.</p>
  <p>Here is how my component looks:</p>
  <pre><code>&lt;template&gt;
      &lt;Multiselect
          v-model=&quot;propValue&quot;
          :options=&quot;this.options&quot;
          :placeholder=this.$filters.translate(this.placeholder)
          :closeOnSelect=&quot;false&quot;
          :searchable=&quot;this.searchable&quot;
          :noResultsText=&quot;$filters.translate(this.labels.noResult)&quot;
          ref=&quot;multiselect&quot;
          @change=&quot;change&quot;
          @click=&quot;click&quot;
          @deselect=&quot;remove&quot;
          :mode=&quot;this.mode&quot;
          :hideSelected='false'
          :max=&quot;this.limit&quot;&gt;
          &lt;template v-slot:caret&gt;
              &lt;img class=&quot;caretMultiselect&quot; :src=&quot;filterIcon&quot; alt=&quot;Filter&quot;&gt;
          &lt;/template&gt;
          &lt;template v-slot:beforelist v-if=&quot;showWarning&quot;&gt;
              &lt;span class=&quot;beforeListContainer&quot;&gt;
                  &lt;p class=&quot;beforeListWarningMessage&quot;&gt;{{this.warningMessage}}&lt;/p&gt;
              &lt;/span&gt;
          &lt;/template&gt;
      &lt;/Multiselect&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import Multiselect from '@vueform/multiselect';
  import filter from '@/assets/filter.svg';
  
  import { nextTick } from 'vue';
  
  export default {
      components: {
          Multiselect,
      },
      props: {
          disabled: Boolean,
          placeholder: String,
          mode: {
              type: String,
              default: 'single'
          },
          showWarning: {
              type: Boolean,
              default: false
          },
          options: Object,
          value: Array,
          warningMessage: String,
          limit: Number
      },
      emits: ['change', 'reachedMax', 'removedTag'],
      data(){
          return {
              filterIcon: filter,
              labels: {
                  noResult: 'No matching records'
              },
              propValue : this.value,
              searchable: true
          }
      },
      methods: {
          change(value) {
              this.propValue = value;
              this.$emit('change', value);
              if (this.propValue.length == this.limit) {
                  nextTick(() =&gt; {
                      this.$refs[&quot;multiselect&quot;].close();
                  })
                  return;
              } 
              this.searchable = true;
  
          },
          click(val) {
              if (this.propValue.length == this.limit) {
                  this.searchable = false;
                  for (let idx in this.options) {
                      if (this.options[idx].label == val.target.ariaLabel &amp;&amp; !this.propValue.includes(this.options[idx].value)) {
                          this.$emit('reachedMax');
                      }
                  }
              }
          },
          remove() {
              this.$emit('removedTag');
          }
      },
      watch: {
          options(current) {
              if (current.length !== 0) {
                  for (let idx in this.propValue) {
                      let option = this.propValue[idx];
                      if (!current.some(e =&gt; e.value === option)) {
                          let index = this.propValue.indexOf(option);
                          index &gt; -1 ? this.propValue.splice(index, 1) : '';
                          this.$emit('change', this.propValue);
                      }
                  }
              }
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>Thanks in advance, appreciate the help.</p>