I liked the script, but I noticed some errors when implementing

1. Not working required, I saw the commit https://github.com/lekoala/bootstrap5-tags/commit/1447a5566b5617b968906dccc58259c1c3f8fa35 Adding this attribute does not display information about what is required

2. In the mobile version of chrome android, inserting a tag by clicking on enter does not work Although you wrote that you fixed https://github.com/lekoala/bootstrap5-tags/releases/tag/1.4.17 I looked at the demo page

3. If you start writing text in the input field, then select it with the mouse and continue writing (rewriting the text), then the text is not written, the first time this error is reproduced immediately

4. When you click on the [label for="id"] or when clicking on the field the highlight is not activated like on classes (blue frame) respectively, it is not possible to apply classes is-valid is-invalid

You didn’t think maybe implementing NOT through a [select] could solve most of the problems as an example here https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

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!

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

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.

We use the following code:

<select
    class="form-select w-auto"
    id="new-task-regions"
    name="new-task-regions"
    multiple=""
    data-server="https://mocki.io/v1/0c5b5251-b7d6-4be8-9d11-304fd930171a"
    data-allow-clear="true"
    data-clear-end="true"
    data-live-server="true"
    data-full-width="true"
    data-suggestions-threshold="0"
    data-show-all-suggestions="true"
    data-keep-open="true"
    data-selected="1"
    style="display: none"
  ></select>

View on Codepen

The pre-selected tag from data-selected attribute is not displayed during initialization. It is displayed only after entering any character.

How fix it?

I thought badgeStyle would allow me to change the color of the badges, but it did not. I think it would be interesting to add the functionality for own classes or styles, and that badgeStyle would not have a default value.

After seeing issue #39 I thought it would be possible by using badgeClass, but it didnt work.

let opt = this._selectElement.querySelector('option[value="' + value + '"]');
if (opt) {
     data = opt.dataset;
}
...
classes.push(...data.badgeClass.split(" "));
...
span.classList.add(...classes);

As far as I can see in the code, the badgeClass attribute is obtained from the option tag instead of the select tag. Is this behavior correct? In my case I don't have option tags, just the select element.

<select class="form-select" id="validationTagsNew" name="tags_new[]" multiple data-badge-class="testing" data-allow-new="true"></select>

Best regards.

This plugin workes so well but I ran into a problem. I want to dynamically update the options of the select(s) as soon as the the change event on the select has fired. In fact, I update the disabled attribute of some options. And then I wanted to re-run the Tags.init() because there is no update() function. So I removed the tags from the DOM and then ran init(). The problem is, that within the INSTANCE_MAP the firstly created instances still exists, so init() will skip the creation of new Objects. Any suggestion? Maybe @lekoala adds a static update() function? That would be the cleanest way.

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

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?

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!

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.