voerro / vue-tagsinput Goto Github PK

I pull my existing tags into my form so that users can choose from existing tags. However there is an issue when two tags are very similar. Take the example that a tag v-bind-class already exists, if I want to create a new tag v-bind, I am unable to, because when I click enter or , the v-bind-class tag is selected.

The only workaround is to add v-bind-class, then add v-bind, then delete v-bind-class

Hello, first of all simple & great component and I'm sorry if this is the wrong spot for suggestions.

I wanted to use Vue's v-model directive and it took around one minute to implement. Maybe you'd like to use this too:

Append "value" to props:
props: ['elementId', 'existingTags', 'oldTags', 'typeahead', 'value'],

Emit an input event after a tag has been added / removed (add this to the "tag()" watcher):
this.$emit('input', this.tags);

You can then use your component like:
<tags-input ... v-model="selectedTags"/>

Cheers

I am using this component with other standard form inputs.
On those form inputs I have a style for :focus where the border color changes.

It would be nice if I could style the wrapper class to have the same border color - e.g. it should have a dark border when I am interacting with the component.

I can't do this with CSS, because there is no way of selecting a parent. It seems to me that the best way to do this is to add an additional class to the wrapper when the component is in active use.

Again, I am happy to make a PR for this, but would need to be pointed in the right direction (I am new to Vue.js)

Thanks

My tag list is growing and noticed some delay on initial load. (Typeahead not loading any tags because it's still loading)
Obviously I can add a loading graphic, but that's not a long term solution as list of tags are expected to grow more.
Maybe handle infinite loading or pagination somehow?

Hello,

When using Vue.component('tags-input', require('@voerro/vue-tagsinput')); in an enviroment created through vue-cli webpack template, an error is produced: vue is not defined.

I bypassed it using the full path for import import TagsInput from '@voerro/vue-tagsinput/src/TagsInput.vue' and then registering it.

Hello.

How catch keydown event?

How get current text? Not tags list, but what the user has entered now?

How to make automatic loading tags fetch?
For example, did the user enter lo and the hint London is displayed?
As I understand it, I can't get it now.

Thank you.

Hi,
I'm using v-model but it seems it doesn't work when the list of tags is updated from the outside.
Example :

  <main id="sandbox">
    <h4>myTags: {{myTags}}</h4>
    <tags-input v-model="myTags"
                placeholder="Add tag here"></tags-input>
    <button @click="populateMyTags">Add Tags</button>
    <button @click="resetMyTags">Reset</button>
  </main>
  <script src="./sandbox.js"></script>

import Vue from 'vue/dist/vue.esm.js';
import TagsInput from '@voerro/vue-tagsinput';
Vue.component('tags-input', TagsInput);

var xxx = new Vue({
    el: '#sandbox',
    data: {
        myTags: []
    },
    methods: {
        populateMyTags: function() {
            this.myTags = ["foo", "bar"];
        },
        resetMyTags: function() {
            this.myTags = [];
        }
    }
});

As you should see, Add Tags and Reset buttons update only the HTML Text but it doesn't update the list of tags displayed in <tags-input>.

@AlexMordred
Is it possible to insert a tag in between other tags? Suppose I delete one specific tag and I want to insert some other tag at the same place of the deleted tag. Is it possible to do using vue-tagsinput? This feature would be great.

If I have 5 existing tags and I want to delete the first tag. I have to delete all the tags and then re-enter the other 4 that I didn't want to delete.

Can you put a 'X' next to each existing tag to give the option to delete just that one tag.

Thank you

<tags-input element-id="tags" :existing-tags="{ @foreach ($tagsList as $tag) '{{$tag->id}}': '{{$tag->title}}', @endforeach }" :typeahead="true"></tags-input>

At 70 it works, at 80 it does not work anymore
The browser displays <!----> in html
I am using laravel

I'd be nice to be able to change the color of the tag (when has already been selected) and of the cross icon. The default bootstrap colors could be used. Thanks in advance!

Is there a way to insert a tag when comma is typed?

It would be helpful, to enforce the user to only allow single tokens to be entered. At least to me it would be.

Hi,

Looks like a great piece of software. Can one adapt the code to support synonyms for suggesting keywords?

Example:
Tags: [ 'big', 'small' ]

List of synonyms:

big = ['large', 'huge', 'enormous']
small = ['little', 'tiny', 'minute']

So when the user will search for 'large' the tag 'big' will be suggested.

Thanks!

the doc states, when using cdn version of the library, that this line should be used

https://cdn.jsdelivr.net/npm/@voerro/[email protected]/dist/voerro-vue-tagsinput.js

but 1.8.0 version doesn't have event firing.

the version which has events as described in the doc is 1.11.1

that line needs to be updated

Sometimes we may need an event to check some rules before adding or removing a tag, and cancel operation when returning false.

tagSelected function is buggy. If there is a tag that contains dot (ie. email address) then you can add it multiple times.

Perhaps comparison should be:
(compareable.search(searchQuery) > -1
instead of
compareable == searchQuery
in tagSelected function

It would be nice if we could customise the p.typeahead element, perhaps with the addition of a few more props?

E.g. I would like to make it an un-ordered list dropdown, rather than paragraph with badges.

<p v-if="displayAs === 'paragraph'" v-show="searchResults.length" :class="displayClass">
    <span v-for="(tag, index) in searchResults"
        :key="index"
        v-text="tag.text"
        @mousedown.prevent="tagFromSearchOnClick(tag)"
        class="badge"
        v-bind:class="{
            'badge-primary': index == searchSelection,
            'badge-dark': index != searchSelection
        }"></span>
</p>
<div v-if="displayAs === 'list'" :class="displayClass">
    <ul v-show="searchResults.length">
        <li v-for="(tag, index) in searchResults"
              :key="index"
              v-text="tag.text"
              @mousedown.prevent="tagFromSearchOnClick(tag)"
              >
        </li>
    </ul>
</div>

props: {
        ...
        displayAs: {
            type: String,
            default: 'paragraph'
        },
        displayClass: {
            type: String,
            default: 'typeahead'
        },
}

Hello,

First of all, thank you for this component.

I was wondering if it's possible to show the complete list of existing tags when the input gets the focus and the "typeahead-activation-threshold" property is set to 0? This could be handy when the user as no idea of what to type in the input or to get an overview of existing tags.

Thank you for your feedback!

Hello friend.

I'm facing a problem: if there is a typeahead for something that start like a new entry, i do not seam to be able to select it.

i.e. Testing your demo at https://voerro.github.io/vue-tagsinput/
Typing "Child" will suggest [Children Of Bodom]. However how do i select the tag [child] now ?

Pressing return will select [Children Of Bodom].
I also tried pressing the tab key (by force of habit ^^).

I may try to find a solution later on and then add my contribution.
Nevertheless if you got a quick solution i would like to know it please :)
Thank you !

It would be nice to be able to remove tags with the keyboard.

If we add tabindex=0 here, then we can add keyboard focus to the remove icons.

However the workflow isn't ideal, because when using a keyboard the user must press tab to move through all the tags before being able to input a new tag.

It would be better if the focus started on the input, and then moved to the remove tag icons.

I'm happy to make a PR for this, if you can point me in the right direction :)

If the component is initialised with an empty array set for the v-model then when a tag is added and the tags-updated or tags-added is fired, the v-model array still remains empty.

I've tried cloning this repo and modifying your demo example and the problem still remains.

So if you were to update the selectedTags property to be an empty array and in your onTagAdded or onTagUpdated callbacks you console.log(this.selectedTags) you will see an empty array the first time you add a tag. If you delete the tag and then re-add the console will correctly show the array with one item in it.

Any thoughts?

Hello.
oldTags is not handy and can be used only once, at component creation.
I reworked it to catch changes of tags from outside of component. I can send this changes to you if you're interested in it

It might be useful to return a new tag to be used instead (which would also equate to true).

I am trying to clean up the users input (pasted stuff, language specific quotes and alike).

Hi all,

I've implemented the component (via CDN) and it works, but I cannot change the default props..

<script src="https://cdn.jsdelivr.net/npm/@voerro/[email protected]/dist/voerro-vue-tagsinput.js"></script>

        <script type="text/javascript">

            var app = new Vue({
                el: '#searchapp',
                components: {  "tags-dic": VoerroTagsInput },

                data: {
                    query: "",
                    typeahead: true,
                    placeholder: 'Add a new tag',
                    limit: 1,
                    onlyExistingTags: true,
                    existingTags: [
                         'DNA',
                         'RNA',
                         'Protein',
                                ],
                    selectedTags: [],
                    
                    
                },
                
            })

</script>

Any suggestions?

Thanks

I understand this might be a Chrome Android keyboard issue.
but no way to add a new tag when pressing enter/return (or comma key with the option enabled).

Works on Firefox Android though

I have created a component in my Laravel application and would like to use your Tags Input field. I have a Vue Class which, when called upon to create a form, it automatically generates an object titled "Reset" with the default field values. The idea being that the form can be reset at any point (e.g., the form is processed, form is cancelled half-way through completion). The issue I'm having is that this input assigns the "Tags" to both the bound field AND the reset field so when the reset truly needs to be applied, it's pushing the tags of the last form.

Here is the resulting object with reset:

`
class Form {
constructor(data) {
this.reset = data;

		for (let field in data) {
			this[field] = data[field];
		}

		this.errors = new Errors();
	}
	reset() {
		for (let field in this.reset) {
			this[field] = this.reset[field];
		}

		this.errors.clear();
	}
}

`

Here is the original call:

export default { data() { return { modal: { header: 'Add Organization', confirm: 'Create', cancel: 'Cancel' }, organizations: {}, form: new Form({ id: '', name_long: '', name_short: { aliases: [] }, }) } } }

And where your component is being used:

<tags-input v-model="form.name_short.aliases" placeholder="Add aliases here"></tags-input>

'Discard Search Results' doesn't seem very intuitive.
Seems to be better to change this option to 'Add a new tag' when selected/highlighted with the keyboard.
eg.
When I want to add a tag called 'Shape' but a tag called 'Shape of Despair' already exists then I can't do so when I press enter key because it defaults to the already existing tag. If there is a 'Add new tag' selection then this fixes the problem.

Please add the option to add tags on blur just like add-tags-on-comma

When removing already selected tags, the removed tags(s) are not added back to the list of available tags until the control is blurred and re-focused.

How can I achieve this: Tag input must be required. The user must submit at least one tag.

Hello, I'm using Vue.js + Bootstrap and the latest version (1.9.1) of voerro tags-input but my tags don't show the 'x' icon to delete them. What can I do?

My code:

               <b-col md="6">
                   <label for="Tags">Technologies</label>
                    <tags-input element-id="Tags"
                                :existing-tags="{
                                1: 'Web Development',
                                2: 'PHP',
                                3: 'JavaScript'}"
                                only-existing-tags
                                :typeahead="true"></tags-input>
                  </b-col>

A screenshot:

Edit:

I'm sorry, GitHub hides the solved issues. I have readed in another thread that this problem appears when the CSS is not installed. But I thought that the CSS was installed.

I'm going to check it out.

Edit:

It works!! Please, close this thread.

I have an existing tags where in the object looks like this the 2,3,4 value is their respective ID's that needed to be send on backend

autoComplete:Object
    2:"Owen Bins"
    3:"test"
    4:"dsfsdf"

from that i can easily pick a name and output on the users array the ID (2,3,4) and put a result on input tag base on the value of the object (Owen Bins, test, dsfsdf)
However, when i fetch from the backend how can I bind from v-model if the data looks like this

users:Array[3]
    0:Object
        id:4
        name:"dsfsdf"
    1:Object
        id:3
        name:"test"
    2:Object
        id:2
        name:"Owen Bins"

Where in the 4 ,3 and 2 is the ID of the user at the same time i want the result of the name on the input tag

The dropdown of existing elements is not working because one of the fields is wrong.

The line 52 on the file VoerroTagsInput.vue should be "v-html="tag.value", or the dropdown will keep not working.

Hello,

I would like to know if it's possible to have tags being always present by default underneath the input, without having to focus on the input. Should I use the @initialized method or is this feature not doable yet ?

Thanks a lot,

When selecting a tag it still shows as a selectable option in the tag list. Would love to see some functionality around not allowing a selected tag to display as an option when typing out a tag name.

Eg: I've got the following tags: Web Development and JavaScript. If I type T into the field, I get both tags. If I then select Web Development and press T again to start typing out a second tag, I still see Web Development as an option, and selecting it does not add it again.

Perhaps an attribute like remove-selected-from-list could be implemented?

Thanks.

As I wrote in #32:
It seems that pressing esc is working, but it inmediatly triggers the searchTag function that is bind on keyup. If I change order it is working.

@keyup="searchTag"
@keyup.esc="ignoreSearchResults"

Hello,

I found that when you enter a new value with parenthesis, you can see the following error in the console: voerro-vue-tagsinput.js:295 Uncaught SyntaxError: Invalid regular expression: /Test (s. On your demo page this is just printed in the console but in my app this makes the tab freeze.

I guess the problem is that you search the pattern on every character input. Maybe you should escape the parentheses to avoid considering it as a matched group. Any plan on resolving this?

Thank you for your help!

Hello everyone,

I have a question about the component, but I'm not sure if it's here that will solve my problem.
I have a form where the user enters with an email address or more. But the tag is only created when the user presses the enter key on the keyboard.
I would like to know, if it is possible, if the user types only 1 email, without having to press enter, the component can capture the v-model of the component to send only this 1 typed email. And if he wants to send more than one email, the default behavior of pressing enter happens when he finishes typing the email.

Hello

I am using the version withotu Single File Component . How i can change the ti-input color ?

How can this component be used without NPM- for example via a CDN?

I've tried linking directly to the github dist files, and the NPM package files. But this throws a TagsInput is not defined error when registering the component with Vue:

The build.js file is definitely being included:

Despite this, there is no TagsInput in the window object:

Here's a fiddle, replicating the issue with the example page for this repo: https://jsfiddle.net/eywraw8t/7148/.

Options:

typeahead = TRUE
existing-tags = [... see dataset below ...]

Dataset:

Existing tags:

{
    1: "first tag",
    2: "second tag"
}

Workaround 1:

1. Select existing tag 1, tag "first tag" is added. It's ok.
2. Input text "1", press enter.

Result: Tag is not added, because slug of existing tag 1 is equal to new adding tag. It's not ok.

Workaround 2:

1. Input text "1", press enter.

Result: added tag named "first tag", but expected "1".

Related wrong code.

Here's my entire component:

None of the events are fired.

<template>
    <tags-input
        :element-id="inputId"
        v-model="selectedTags"
        :typeahead="true"
        :typeahead-max-results="10"
        :typeahead-activation-threshold="3"
        :limit="limit"
        :existing-tags="existingTags"
        :placeholder="$t('Start type')"
        :only-existing-tags="onlyExistingTags"
        @initialized="onInitialized"
        @tag-added="onTagAdded"
        @tag-removed="onTagRemoved"
        @tags-updated="onTagsUpdated"
        @keydown="onKeyDown"
        @keyup="onKeyUp"
        @focus="onFocus"
        @blur="onBlur"
    ></tags-input>
</template>

<script>
    import TagsInput from '@voerro/vue-tagsinput';

    export default {
        methods: {
            onInitialized() {
                console.log('Initialized');
            },
            onTagAdded(slug) {
                console.log(`Tag added: ${slug}`);
            },
            onTagRemoved(slug) {
                console.log(`Tag removed: ${slug}`);
            },
            onTagsUpdated() {
                console.log('Tags updated');
            },
            onKeyDown() {
                console.log('Key down');
            },
            onKeyUp() {
                console.log('Key up');
            },
            onFocus() {
                console.log('Input focused');
            },
            onBlur() {
                console.log('Input blurred');
            },
        },
        props: [
            'inputId', 'onlyExistingTags', 'selectedSkills', 'inputLimit'
        ],
        name: "SkillsTagsInput",

        components: {
            'tags-input': TagsInput
        },

        data() {
            return {
                selectedTags: [],
                existingTags: {},
                limit: 10
            }
        },

        created() {
            if (this.inputLimit) {
                this.limit = this.inputLimit
            }
            if (this.selectedSkills) {
                this.selectedTags = this.selectedSkills
            }
            this.$http.get('/skills')
                .then(response => this.existingTags = response.data)
                .catch(error => console.log(error))
        }
    }
</script>

Hi,
Tnx for this great gift.
Is it possible not to force selection of a auto complete tag? For example if I have a tag ABC and I'm typing A the ABC is automatically selected and unless I press ESC the ABC while be selected and pressing enter would select it when I actually want to a new tag (A). Maybe instead I can get all the auto complete option and only by actively selecting it it will replace my A with ABC and otherwise pressing enter would just add my A tag.

Hail to the metalhead!

iPhone shows the pills and completes, Android does not.

how can I limit the selected to 3?

Is it possible to make the typeahead trigger an ajax lookup for the tags or must I prepopulate the existingTags object?

It would be ideal if instead of populating 9000 items into tags could just intercept the typeahead to make an axios call. Something like:

      <voerro-tags-input
        :typeahead="true"
        :typeahead-max-results="20"
        :typeahead-activation-threshold="3"
        :existing-tags="mytags"
        typeahead-fetch="fetch"
        element-id="myid"
      />

  data () {
    retturn: {
      mytags: {}
    }
  },
  methods: {
    fetch: function (typeahead_value) {
      this.axios.get('/api/data', {
         params : {
           query: typeahead_value
         }
        }).then(response) => {
          this.mytags = response.data
        })
    }
  }