Please consider adding a debounce for server calls (reduce number of server calls while user is typing), similar to
shentao/vue-multiselect#955
mostafa-rio/vue-multiselect@660c1be

Thanks!

When working with an empty select list to let the user enter as many tags as they wish, Tags will fail to properly calculate the input size and will throw an error in the console as follows:

Uncaught TypeError: Cannot read properties of undefined (reading 'length') at Tags.#adjustWidth (app.js:...) at Tags.#configureSearchInput (app.js:...) at new Tags (app.js:...) at Function.init (app.js:...) at HTMLDocument.<anonymous> (app.js:...)

What is the correct way to use the regex validation? I think I've tried every possible option and nothing seems to do what I want. It either has no effect, or it prevents all entries.

Using this code:
select_el.setAttribute("data-regex", /[A-z]/);

I have confirmed through the Tags class using console.log("REGEX: " + this.validationRegex); that my regex value is being passed into the Tags class, but as stated above, the outcome not right.

I have tried it with/without quotes, with/without "gi", with/without brackets, and probably other ways too. I'm out of ideas.

Thanks for your help.

Congratulations for this snippet.
I wonder if it can be posible to have different color and/or style per tag.
May be with an attribute in each <option>. For example:
<option value="1" data-badge-style="secondary">First</option>
<option value="2" data-badge-style="primary">Second</option>

Thank you for your work !!

This is specific to 1.4.10, after a selection is made the placeholder is still visible. Placeholders should only be visible when no selection is made.

It will be a super nice to have feature to have an option to keep the selection popup on screen after a selection is made and the "Multiple" attribute is set on the target element, so that the user doesn't have to manually trigger the popup for every selection to be made.

If you add a predefined tag from the list, and press enter again, that tag will also get added again. This doesn't happen when you add a new tag.

Video below was recorded on the Codepen demo in "Tags new" input, but the same happens in the "Tags" input. First I added "Banana" tag which os one of the predefined tags and then pressed enter few times. The tag was also added multiple times. Then I refreshed the page and added "Test" tag which is a new tag and again pressed enter multiple times, but tag was not added.

Is it possible to prevent adding the same tag multiple times this way?

Not sure if this was implemented (although I saw some issue related to this), but can we clear tags by using backspace on the keyboard? I tried it, but it doesn't delete tags when trying to do that.

Tested on Edge/Chrome ...

Hi,

I'm trying to use Tags as a user-friendly field for identifying a particular, single database record.

A simple example might be a private messaging system, which searches a database of usernames. If multiple results are returned, the dropdown menu with all valid suggestions renders correctly, but if only one is found it doesn't render at all - no .show is generated - and the containing .form-control.dropdown gets .is-invalid added.

<select multiple name="person" data-placeholder="Start typing"
                        id="suggestfield"
                        data-server="/user-suggest/"
                        data-live-server="1"
                        data-suggestions-threshold="3"
                        data-allow-clear="1"
                        data-full-width="1"
                        data-max="1">
                        <option disabled hidden value="">Choose a person</option>
                    </select>
import Tags from "/js/tags.js";
Tags.init("#suggestfield");

I've simplified a few values for explanation, but that is otherwise my code. Correctly formed JSON is returned, and no errors are reported in console; it simply seems to be not liking having only one single possible suggestion. I've updated whatever I may have been using to 1.4.34 with no change.

Post-thought: Could it be that the queried string is not necessarily within the returned suggestion text, as I am also searching an AKA table, but only returning the root text value?

When multiple selections are allowed, the selection popup is closed every time a selection is made, and in order for it to be displayed again you have focus out of the element and then focus back into it.

When press form's Submit button OOTB bootstrap validation error mesage is not shown for select when it is required.

#bootstrap5

Is there a way to prevent add the same value for allow new tags? Thanks

Marvelous plugin. I see there's a way to add a custom class, however one cannot add multiple classes.

IE:
data-badge-class="text-dark someOtherClass"

Will throw an error: Failed to execute 'add' on 'DOMTokenList': The token provided ('text-dark someOtherClass') contains HTML space characters, which are not valid in tokens.

Could a split of some form be added for when multiple classes would be useful?

Further, is it possible to style the dropdown suggestions with the same class?

Hi and thanks again for this awesome plugin.
I'm trying to keep the inputs a user makes in the tags input field after sending the form. For simple text input fields, adding
value="{{ request.form['id of the field'] }}"
keeps the values after input. Is there a way to achieve something similar fot the tags inputs? Would have to be applicable to newly added tags.
Thanks a lot!

Hy, I spent part of my day implementing this library. It's really nice to use. But for me it's missing an important element: we can't initialize the input field with selected value (with JSON or with init function).

It's really a pity !

This issue is just an idea for improvement, if you want to implement it I am available to test. Otherwise you can close it.

Have a nice day !

When a user adds a tag, then backspaces or clicks a button to remove it then the tag disappears from the list and cannot be readded.

P.S. This project has been an absolute life saver for my project. Thank you!

This is the code :

<select class="form-control" id="tags" name="tags" multiple data-allow-clear="true" data-suggestions-threshold="0" data-max="2">
    <option selected disabled hidden value="">Choose</option>
    <option value="1" selected="selected" data-init="1">111</option>
    <option value="2" selected="selected" data-init="1">222</option>
    <option value="3" selected="selected"  data-init="1">333</option>
    <option value="4" data-init="1">444</option>
    <option value="5" data-init="1">555</option>
</select>

Thanks.

I'm trying to find a way to programmatically clear all selections and display the placeholder back. Not just like a reset to default values since there will be cases where selected values are not valid anymore.

I see a removeActiveSelection method but that didn't do the trick for me, there's also a removeAll method but it seems a little extreme for this use case.

First off all, amazing work dude!
But, I encounter some problem using this library which is as it says in the title. Luckily I know the way around that. Which is to use event.keyCode rather than event.code on input keydown event and it works. I would love to make a pull request but I would like to hear some feedback first, Cheers🍺.

Hi, thanks so much for this simple yet awesome feature. I have one small issue when using it. I want to use it solely for entering "new" tags, so without a "lookup" functionality, within a form in html. I want to pass the data entered to python back-end. However, python only receives the very first value/tag as opposed to the whole list of tags entered. Any idea what may be causing this?
Thanks in advance!
Stefan

On a recent enhancement request it was asked to keep the selection popup open when the multiple attribute is present on a select element. I found a small glitch on how the code was implemented: if multiple attribute is set but only one selection possible (max option set to 1) there's no need to keep displaying the popup since only one selection possible and it was already selected.

To replicate:

1. Set the multiple attribute on a select element.
2. Set the max option to 1, wither by data attributes or global options.
3. Load the website and select one option from the affected element.
4. The selection popup remains open but only one option is allowed.

A side effect issue of this, is that if you switch options from this dropdown a couple times, the popup will remain open no matter what, even if another popup is triggered from a different element.

The width looks fine when English was input, but when you input Korean or some other foreign language the tags input field shows shorter than its supposed to be

[Image]

[My Solution]
Looks natural when 'length + 1' was replaced to 'length * 2' in _adjustWidth expression

This also specific to 1.4.10, after a selection is made the selected option is not removed from the selection popup, so you are basically allowed to enter the same value as many times as you select it from the list.

When the original select element has one or more disabled options, after the Tags UI gets populated items matching the originally disabled options will be still visible and selectable thus leading to potential validation issues.

Users should not be able to select an option that is disabled, Tags should provide a way to either disable or hide options as needed.

Dropdown with data-suggestions overlaps error message(class="invalid-feedback") below the select field.
Dropdown should be hidden immediately once validation error occurs.
And validation error message should not disappear after focus is moved away from the select field with error.

#bootstrap5

Select options are often loaded dynamically by an ajax call or an event tied to it or a related element. Will be a very nice feature to have if the Tags UI gets updated whenever the original element is updated (options added/deleted or option attributes disabled/hidden changed).

Hi,
looks like tag fields don't honor form reset.

Codepen repro example

1. Change values for username, checkbox and roles
2. Press Reset
3. You'll see both username and checkbox reset to their respective initial value, but not roles

Not sure, but I suppose this is probably something related to the use of setAttribute inside your lib code.
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

BTW, thanks for this nice lib.
Keep up the good work 😃

Placeholder displays properly on page load, but after all tags are cleared from a field it will remain empty until a new tag is selected. Ideally, placeholder should display whenever there is no value attached to a field.

I'd like the capability to specify the maximum number of tags supported by the multiple select.
Maybe something like a new attribute data-max-tags.
For instance, if

• available options are: apple, banana, and orange
• data-max-tags="2"
• currently selected options are banana and orange

then the user can't add apple unless he/she removes something first.

This feature would be useful, for instance, when selected options are saved as colums in a relational db, especially if data-allow-new="true"

@lekoala What do you think?

Hi,
looks like tag fields don't honor form reset.

Codepen repro example

1. Change values for username, checkbox and roles
2. Press Reset
3. You'll see both username and checkbox reset to their respective initial value, but not roles

Not sure, but I suppose this is probably something related to the use of setAttribute inside your lib code.
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

BTW, thanks for this nice lib.
Keep up the good work 😃

Currently, there's only an all or nothing way to retrieve resources from the server, which in turn can be counter productive when retrieving lots of data. Will be nice to have feature to allow to query server as the user types in so that data is returned in small chunks.

From demo.html, there are 3 options, "Apple", "Banana", "Orange".
If I would like to insert a new tag called "an", it will highlight "Banana" in suggestions as shown below. Pressing enter would choose "Banana" but not the new tag "an".

Is it possible for users to press escape to hide the menu? Or not selecting any options by default?

I do not know JavaScript well, but i have tried adding few lines of codes and it worked for me:

// Other key handlers
// After line 364
case 27:
case "Escape":
  this.#hideSuggestions();
  break;

Just noticed that if you click on an item of the dropdown and don't release the mouse button immediatly (literally) the dropdown close without adding the tag. You have to click very fast to make it work; which is a bit annoying.
You can easily reproduce the issue on the online demo.
It happens in my code too.

As weird as it seems, data-separator is not working on Chrome for Android: the only tags that will be selected are the ones picked from the dropdown, so you are not allowed to enter tags on the fly. This is working perfectly fine on Chrome desktop.

It's common practice, at least for me, to listen to event updates directly on the document selector rather than on each individual element dispatching. This allow me to sort of of standard way to listen for event for both static and dynamically loaded DOM elements. The issue with tags is that the event is not bubbling up all the way up to the document element so I am not able to capture the change event without major refactoring of my code. I have created a Jsfiddle illustrating my point, see below:

https://jsfiddle.net/unckv93h/

See that nothing is logged to console when adding the event listener right into the document selector.

<div class="invalid-tooltip"> error message shoud be shown straight below the select field with error and overlap dropdown with data-suggestions(for smooth UI, suppose dropdown should be hidden immediately once error occurs), see bootstrap5 documentation.

#bootstrap5

The first option is deselected after the init process, is there any misconfiguration?

The Originalcode

<select class="form-select" id="tags-input" name="tags[]" multiple="" data-allow-new="true" data-server="pathToServer" data-live-server="1" data-allow-clear="true" data-badge-style="info">
  <option value="6" selected="selected">tree</option>
  <option value="3" selected="selected">star</option>
  <option value="2" selected="selected">adsf</option>
  <option value="1" selected="selected">asdf</option>
</select>

After the init process (and tree is not shown)

<select class="form-select" id="tags-input" name="tags[]" multiple="" data-allow-new="true" data-server="pathToServer" data-live-server="1" data-allow-clear="true" data-badge-style="info" style="display: none;">
  <option value="6">tree</option>
  <option value="3" selected="selected" data-init="1">star</option>
  <option value="2" selected="selected" data-init="1">adsf</option>
  <option value="1" selected="selected" data-init="1">asdf</option>
</select>

Hi again,

I think it could be interesting (when data-allow-new="true") to add a new tag with another key other tan 'enter'. At least I am thinking in comma, tab and may be space key too.

What do you think?

I am using the following form.
<div class="col-sm-3"><select class="" id="exampleGroup5"><option value="두피" data-init="1" selected="selected">두피</option><option value="스킨">스킨</option><option value="페이셜">페이셜</option></select></div><div class="col-sm-3"><select class="form-select" id="separatorTags" name="tags_separator[]" multiple data-allow-new="true" data-allow-clear="true" data-separator=" |,| "><option value="">Type a tag...</option><!-- you need at least one option with the placeholder --></div>

The problem with this is that the part I want to use in the "select" form is also changed to the "tags input" form.
How can I keep the select form I want?

I am setting some global options up when initializing the Tags object, but the expected results per the applied settings are not taking place. Only way settings are applied is when using data attributes.

For example:

Tags.init(tagsSelector, { allowClear: true, suggestionsThreshold: 0, });

doesn't work. So I need to explicitly set the data attributes on the element by either altering HTML code or tricking Tags before initializing by programmatically adding the attributes. Like this...
document.querySelectorAll(tagsSelector).forEach(tagsEl => { tagsEl.dataset.allowClear = true; tagsEl.dataset.suggestionsThreshold = 0; });

The expected result is that when initializing Tags with an options object, specified settings take effect on the UI as expected.

When you declare an empty option to use as a placeholder on a single select element, even tho the placeholder is displayed properly, if you try to get the value of the element you will confirm that it's taking the value from the first not empty option.

On a similar note, and I believe this is new to this version, a single select with no placeholder doesn't display the first available option as expected.

JSFiddle ahead... https://jsfiddle.net/xkr5uyLe/

It would be nice to programmatically enable/disable the Tags dropdown element (simulating the appeal of a native disabled select element) to deal with situations where tag selection have a dependency on information required to be entered/selected on another element.

When querying server-side, one might want to select multiple values from results. Now one has to type the same query again after selecting a value.

An option to keep the list of results open while selecting values (until clicking outside of the list) would be useful.

This also needs to keep existing search value after selecting items.

eg https://vue-multiselect.js.org/#sub-select-with-search

 :close-on-select="false",
 :clear-on-select="false",

The current suggestions drop-down position is right under letters entered by user.
There are some issues with this:

1. using keepOpen, the drop-down list position changes/jumps on screen after each selection.
2. when entering text towards the end of input, the dropdown goes out of screen:
   

Suggested fix: keep drop-down in a fixed position, always under the input, similar to https://vue-multiselect.js.org/
This would solve both issues.

I am attempting to get the live tag suggestions from my database. I think I have it almost working... Using the debugger, I have found that results are being returned to the browser in JSON format, but the web page still doesn't show any drop down with suggestions.

The "read me" page doesn't give details on the expected structure of the JSON results coming from a server. The structure I have chosen was just a wild guess so it is most likely the problem.

The structure looks like this: {"3":"work","4":"home"}

Or generally speaking, this format: {database_id: tag_name, database_id: tag_name}

Is that structure the problem?

Also, is there a more detailed instructional page that goes into more detail than the github read me page?

Thanks for your help!

Is it currently possible to apply the input as a tag when the blur event occurs on the input field?

Best regards

When set the option "max", does't show the existing tags.

When the original select is disabled when DOM is loaded, the Tags popup selection is never triggered after resetState() method is called.

Check the JSFiddle example below so you can confirm.

https://jsfiddle.net/1xpqo94k/

PD: another issue that I believe shares the same root cause is that after disabling a select that was not originally disabled and then calling resetState(), the field looks as it is disabled (visually at least), but the popup selection is still triggered when threshold is 0.

Please, check your demo page - the package functionality is displayed incorrectly there

Hi,

Server side should provide an array of value/label objects.

Would it be possible to please have new constructor options which say what server-side fields map to value/label?
eg valueField: 'id', labelField: 'title'

Thanks!