When I delete a bunch of tags and leave only a single tag the input contains:

,,,,,,,,,,,,,,,,foo

Issue

If the caret of the input line is at the very start and no tag is selected, pressing the backspace key won't select the first tag left to the input line for Chrome (63.0 Developer Build).
It may be that this is only the case if the proposed fix of Issue #6: Selecting and deleting tags via keys not working in Chrome is applied to the keypress EventListener by changing keypress to keydown.

Possible fix

In tagsinput.js, the caretAtStart(el) function should take an input element as argument, not a keydown event (probably also not the keypress event, I can't test this at the moment). It was sufficient for me to change the atStart variables in the init() and the addTag() functions
from
atStart = this.caretAtStart(e); (e is the keydown EventListener Listener)
to
atStart = this.caretAtStart(this.input); .

I have a Problem with the Bulma-Extension TagsInput 2.0.0. If i start my Project and it tries to build the Extension i get an Error.

At the Moment i use Angular 7 and Electron 3. In the Browser Console i get this:

DevTools failed to parse SourceMap: http://localhost:4200/scripts.js.map

And in my IDE it throws an Error

[1460:0112/135546.036:ERROR:CONSOLE(5509)] "SyntaxError: Unexpected token j in JSON at position 133878", source: chrome-devtools://devtools/bundled/shell.js (5509)

I noticed that there are different SyntaxErros anytime i try to build and start. Had this Problem some Weeks ago and decided to remove the Javascript File "node_modules/bulma-extensions/bulma-tagsinput/dist/js/bulma-tagsinput.min.js" and after that i got no Errors anymore.

But i really want to use the TagsInput Extension with Bulma. Would be really nice if i get some Help or if someone can fix this.

When entering a tag the input field isn't centered anymore.

HTML

<p class="control has-icons-left">
	<input class="input" type="tags" placeholder="Add a tag" value="">
	<span class="icon is-small is-left">
              <i data-feather="tag"></i>
        </span>
</p>

CSS

No additional css

Hi,

@Wikiki is it possible to update the npm repo for this module?
I need the last commit 'Add export default' for my project :)

Thanks in advance!

I am trying to use bulma-tagsinput in my Angular project without success.

Below the steps I did:

1. Install the package with npm i bulma-tagsinput
2. Declare bulma-tagsinput.min.js in my angular.json

"scripts": ["./node_modules/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"]

3. In my main.ts, import the extension and run the attach command

import * as bulmaTagsinput from 'bulma-tagsinput';

bulmaTagsinput.attach();

4. Add the extension in my sass file

@import "~bulma";
@import '~bulma-tagsinput/dist/css/bulma-tagsinput';

5. See the result in text and not in tags

Is there something else to do?

Issue

The form field (i.e. the box around the input) doesn't get visually emphasized if it is focused for Bulma 0.6.1.

Possible Fix

It is possible to implement a highlighting focus behaviour in tagsinput.js by changing the focus and blur EventListener behaviour from

this.element.addEventListener('focus', () => {
        this.container.classList.add('focus');
        this.select((Array.prototype.slice.call(this.container.querySelectorAll('.tag:not(.is-delete)'))).pop());
      });

this.input.addEventListener('focus', () => {
    		this.container.classList.add('focus');
    		this.select((Array.prototype.slice.call(this.container.querySelectorAll('.tag:not(.is-delete)'))).pop());
      });
this.input.addEventListener('blur', () => {
    		this.container.classList.remove('focus');
    		this.select((Array.prototype.slice.call(this.container.querySelectorAll('.tag:not(.is-delete)'))).pop());
    		this.savePartial();
      });

to

this.element.addEventListener('focus', () => {
        this.container.classList.add('is-focused');
        this.select((Array.prototype.slice.call(this.container.querySelectorAll('.tag:not(.is-delete)'))).pop());
      });

this.input.addEventListener('focus', () => {
    		this.container.classList.add('is-focused');
    		this.select((Array.prototype.slice.call(this.container.querySelectorAll('.tag:not(.is-delete)'))).pop());
      });
this.input.addEventListener('blur', () => {
    		this.container.classList.remove('is-focused');
    		this.select((Array.prototype.slice.call(this.container.querySelectorAll('.tag:not(.is-delete)'))).pop());
    		this.savePartial();
      });

since is-focused is a valid class modifier of a field in contrary to focus.

It shows normal text instead of the tags

I'm using horizontal form. When I use TagsInput in a row it deletes the bottom padding and sticks to the next row. Here's my markup:

<div class="field is-horizontal">
    <div class="field-label">
        <label class="label">{{ __('admin.tags') }}</label>
    </div>
    <div class="field-body">
        <div class="field">
            <input class="input" type="tags" placeholder="Add Tag" name="tags"
                   value="{{ old('tags', optional(optional($post??null)->tags)->implode('name', ',')) }}">

            @if ($errors->has('tags'))<p class="help is-danger">{{ $errors->first('tags') }}</p>@endif
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label">
        <label class="label">{{ __('admin.force-update-slug') }}</label>
    </div>
    <div class="field-body">
        <div class="field">
            <input class="switch is-rounded" type="checkbox" name="force_update_slug"
            id="force_update_slug" {{ old('force_update_slug') ? 'checked' : '' }}>
            <label for="force_update_slug"></label>
        </div>
    </div>
</div>

Hi, when I enter tags into an input field, there is basically no left and right padding and the "delete" button is not there.

I've tried messing with the CSS directly and I've noticed that attributes like border-radius respond, but margins don't and I have no idea how to get the little "delete button to show up.

Can't create a tag with comma which is also possible with tags-input. For example, test, should create a tag.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Issue

Tag selection of the following keyevents isn't working properly: Backspace, Delete, ArrowKeys
In detail:

• After the backspace key event - deleting a selected tag - the tag left to the deleted tag isn't selected. Instead no tag is selected.
• After the delete key event - deleting a selected tag - the tag right to the deleted tag isn't selected. Instead no tag is selected.
• The arrow key events - selecting a tag left or right - are not working at all.

Possible Fix

The JS commands selectedTag.nextSibling (selectedTag.previousSibling) doesn't yield the sibling span.tag element but the sibling div.control element which posses the span.tag in second order as a child knot. It was sufficient for me to change in tagsinput.js all select commands from
this.select(selectedTag.nextSibling);
(this.select(selectedTag.previousSibling);
to
this.select($(selectedTag.nextSibling).find('span').get(0));
(this.select($(selectedTag.previousSibling).find('span').get(0));)

I got working tagsinput in Vuejs.

I populate tags and start the instance with
new Tagify(document.getElementById('mytags'))

and tags show up.

Now i try to change the value programmatically and i can confirm that value of input changed
$vm0.$el.querySelector(".input").value
but tags did not.

How can i refresh those tags after value change?

Followed the guide, and I compiled the tags into my scss. I also imported the JS script like so.

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

Yet the tags input just shows a string. How should I go about fixing this?

It seems that after version 0.2.1 there were major breaking changes, specifically in the folder structure and naming of files. If anyone had bulma-tagsinput listed as version ^0.2.1 in their package.json and did a reinstall anytime after you added new patch versions their project would be completely broken due to invalid references to files which are now located behind a dist folder along with different naming conventions.

I just thought it was worth posting this here because such a change really should have warranted a "major" version bump to prevent npm from installing a version that breaks without adjusting for breaking changes. I know that other plugins you wrote, you had made similar folder structure and naming convention changes that would also cause the same issues. It might be helpful to document those breaking changes in your readme files for each plugin referencing version numbers that would be affected.

Thanks!

Can't delete tags with backspace key which is possible with tags-input

I'd like to be able to specify which keys are delimiters. For example, I want the SPACE character to indicate a new tag.

<input class="input" type="tags" placeholder="Add Tag" value="Tag1,Tag2,Tag3" data-tags-delimiters="enter,space,comma">

Allow Bulma size modifiers (is-small, is-medium, is-large) on tag and group size modifiers (are-medium) on tags.

Perhaps these could be added via dataset options, such as data-size="is-medium"?

Whenever I use it the input area is at the bottom.

Another issue I'm getting is that there is an outline to the input as well.

Hi,

Is there a way to use the Tagify class from this extension?
Since the last release, I'm not able to create instances of it like this:

import` Tagify from ...

new Tagify(element) 

Thanks

I tried everything, but i cant solve it. I use Angular and i tried on many Ways to delete or set the Tags in my Code, but i just found no Way.
Is there a Way to reset or add Tags in Code? Maybe someone has an Example.

Issue

The following keys are not working with respect to deleting and selecting tags if one uses Chrome (63.0 Developer Build): Backspace, Delete, Left/Right

Possible Fix

Apparently one has to distinguish the behaviour of different browsers regarding the JQuery EventListener Variables keypress, keydown and keyup:
https://stackoverflow.com/questions/4843472/javascript-listener-keypress-doesnt-detect-backspace/4843502

For me it was sufficient to alter tagsinput.js by changing keypress to keydown in
this.input.addEventListener('keypress', (e) => {
to
this.input.addEventListener('keydown', (e) => {
in the enable() function and subsequently hardcoding the keycode 188 of the delimiter , from
if (key === 13 || key === this.options.delimiter.charCodeAt(0) || key === 9)
to
if (key === 13 || key === this.options.delimiter.charCodeAt(0) || key === 188 || key === 9)
since keydown refers to actual key codes, not ascii codes.

Hi I am getting this "error" on the TagInput extension, the extension works fine it's just this annoying message appears in console, and I have no idea why. Seems like a syntax error.

Any compat with Typedhead autocomplete like on bootstrap or on this demo : https://voerro.github.io/vue-tagsinput/ ??

I installed tagsinput, imported js and scss and added a type=tags input, but it's just a simple text input:

import 'bulma-tagsinput/dist/bulma-tagsinput.min'

@import "~bulma-tagsinput";

<input class="input" type="tags" placeholder="Add Tag" value="Tag1,Tag2,Tag3">

Issue

The input line is not rendered properly by Bulma 0.6.1: The input line ( and following the form field itself) are displayed in the size of is-small despite is-normal being the default. Also, before the first key event, the input line isn't filling the whole form field - In my case only about the width of a column of the size one-fifth.

Possible Fix

I fixed the problem by explicitly declaring the class name of the input element in tagsinput.js
this.input.className = 'input';
after the instantiation of the input element in theinit() function
this.input = document.createElement('input'); .

i see the delete icon on the tag but its not working

So I've gotten the tags working in my desktop browser. However, when I switch over to my phone, and try them, I cannot seem to click the "x" to delete them, but I can add them. Is this an issue with the extension? Or an issue on my part?

Issue

For Bulma 0.6.1 selected tags aren't highlighted.

Possible fix

The bulma css class modifier is-active doesn't exist for the class tag. Changing all is-active occurences in tagsinput.js to any valid tag class modifier, e.g. is-primary, seems to do the job.