Input/Placeholder should be hidden if maxTags is greater than tags length

[danbrellis]

It seems to me that once the tags length is equal to the maxTags prop, the input should no longer be shown. It gives the user the false sense that they can continue to add more tags since the placeholder is shown and they can type into the field.

I saw this issue resolved about hiding the placeholder, but it doesn't address the user's ability to type a new tag: #21

It seems like a simple fix by just adding the below v-show on the input tag in vue-tags-input.vue.

v-show="maxTags > tags.length"

I can create a pull request.

[danbrellis]

PR added: #116

[abasille]

Hi @danbrellis ,

By hiding the input field when maxTags is reached, you disallow to react when the end-user is trying to add a new tag:

  watch: {
    // Listen to the input field
    query: 'refreshSuggestions',
  },
  methods: {
    async refreshSuggestions() {
      if (this.maxTags > 0 && this.tags.length >= this.maxTags) {
        // *** With #116 , the following code will never be executed
        // Delete the input field
        this.query = '';
        // Display a warning message to the end-user in the suggestion list
        this.suggestedTags = createTags([`${this.maxTags} tags max`]);
        // ... but it could have been a flash message or what you want
        // that informs the end-user the max number of tags has been reached. 
      } else {
        this.suggestedTags = await this.search(this.query);
      }
    },
    // ...
  },

So, a compromise should be to enable this behavior with a boolean prop (e.g. hide-input-on-max-tags).

What do you thing about adding this prop to your PR?

@JohMun What's your opinion?