wikiki / bulma-tagsinput Goto Github PK
View Code? Open in Web Editor NEWBulma.io extension to add interaction on input tags
License: MIT License
Bulma.io extension to add interaction on input tags
License: MIT License
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?
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
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.
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
.
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);
.
Can't delete tags with backspace key which is possible with tags-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.
The form field (i.e. the box around the input) doesn't get visually emphasized if it is focused for Bulma 0.6.1.
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
.
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 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.
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">
Tag selection of the following keyevents isn't working properly: Backspace, Delete, ArrowKeys
In detail:
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));
)
When I delete a bunch of tags and leave only a single tag the input contains:
,,,,,,,,,,,,,,,,foo
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?
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
Any compat with Typedhead autocomplete like on bootstrap or on this demo : https://voerro.github.io/vue-tagsinput/ ??
I am trying to use bulma-tagsinput in my Angular project without success.
Below the steps I did:
npm i bulma-tagsinput
bulma-tagsinput.min.js
in my angular.json"scripts": ["./node_modules/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"]
main.ts
, import the extension and run the attach commandimport * as bulmaTagsinput from 'bulma-tagsinput';
bulmaTagsinput.attach();
@import "~bulma";
@import '~bulma-tagsinput/dist/css/bulma-tagsinput';
Is there something else to do?
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!
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>
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"
?
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.
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">
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
.
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');
.
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.
Can't create a tag with comma which is also possible with tags-input. For example, test,
should create a tag.
i see the delete icon on the tag but its not working
For Bulma 0.6.1 selected tags aren't highlighted.
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.
It shows normal text instead of the tags
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?
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:
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.
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 📦🚀
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.