creativebulma / bulma-tagsinput Goto Github PK

Hi!

When I'm using the taginput with dynamic data source and sending the the form to my server, all I get is a comma list, without any value.

E.g. when I select France, Germany, Italy, my server recieves ,,,

I'm using the example from the docs. Is there something I can do?

The tabs to toggle the various sections of the documetntation site are not working.

For example, can't toggle to the "Code" tab here:

The encapsulation for HTML is this:

<span class="tag is-rounded" data-value="[email protected]">
    [email protected]
    <div class="delete is-small" data-tag="delete"></div>
</span>

But if we use special characters, for example insert something like: "Email" <[email protected]> ... then:

<span class="tag is-rounded" data-value="" Email"="" <email@email.com="">"&gt;
    "Email" <email@email.com>
    <div class="delete is-small" data-tag="delete"></div>
</email@email.com></span>

It's completely broken! I think it needs a bit of sanitizing for input.

Using a dynamic data source works very well for initial input for tags on a form for adding a new record.

However, on an edit form where I have some previously entered tags to set up, new tags can not be added using the same XHR data source.

This may be related to the noted warning that

It is not possible to add tag by typing in this mode (only programmatically or using providing a data source).

I am able to type into the form, and suggestions are returned and returned correctly, but nothing happens when I click on one in the dropdown. Neither before.add nor after.add fire. The suggest dropdown simply closes.

It really should do something equivalent to the following:

inputTags.BulmaTagsInput().add([{
     option.itemValue: item.id,
     option.itemText: item.text
}]);

Hi,

I'm using tagsinput in one of my projects and noticed the following: If I write some JS code between script tags into the input (e.g. <script>alert('1')</script>), it gets ran, and after that the input displays an empty item:

The script also runs every time I preload the tagsinput with the script tag.

Edit: Yeah you know what it was? I installed bulma-tagsinput, not @CreativeBulma/bulma-tagsinput. Classic!

I'm having an issue attaching to a HTMLInputElement (when passed as an element).

Repro

1. Add this library directly to an index.html

   <input id="cheese" type="tags" class="input">
   <script src="dist/bulma-tagsinput.min.js"></script>

2. Open Chrome debug console
3. Fetch the input element

   var test = document.getElementById("cheese")

4. Attach tagsinput

   bulmaTagsinput.attach(test)

Expected

test.BulmaTagsInput() is available.

Actual

bulma-tagsinput.min.js:formatted:361 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[object HTMLInputElement]' is not a valid selector.
    at Function.value (https://localhost:5001/dist/bulma-tagsinput.min.js:1:8944)

Other Info

I would expect this line to be hit:

Looking at the minified javascript, it doesn't look like it's hit.

Because of minification during build, the this.contructor.name here gets replace by $i sometimes. This causes the error as stated in the issue title.
Could this be replaces by a const? I'm not sure using the constructor thing brings anything really

I was trying out this component and found this issue. I tried to apply some css to fix this unsuccessfully. This does not allow the user to delete the tag so I guess it's a bug.

When using with an input like this:

<input class="input is-small">

I was expecting the tags-input to keep the correct input size, but instead it became much bigger. Looking at the transformed html, I now have this:

<div class="tags-input">
  <input class="input is-small">
</div>

But looking at the sass file, it seems the size will only work if is-small is applied on .tags-input, which is not the case here. Is it a bug? or an option to give when using new BulmaTagsInput(selector, options);

It would be nice if bulma-tagsinput awaited emit().

The old version of bulma-tagsinput added the tag when tabbing out of the input field. The new one doesn't do this. It would be great if this could be supported, possibly with a configuration option.

I am using this as a standalone TagInput component, where whenever I want to use it, I will import it and use it like:

<TagsInput
  attribute="tags"
  label="Tags"
  value={eventForm.tags}
  placeholder="Choose Tags"
  changed={handleChange}
/>

Unfortunately, @creativebulma/bulma-tagsinput doesn't detect onChange, as such, I can't retrieve the values that are within the TagInput. What am I missing here?

This code is taken and modified from original codepen provided by creativebulma:

import React from "react";
import BulmaTagsInput from "@creativebulma/bulma-tagsinput";

export default class TagsInput extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        allowDuplicates: props.allowDuplicates || false,
        caseSensitive: props.caseSensitive || false,
        clearSelectionOnTyping: props.clearSelectionOnTyping || false,
        closeDropdownOnItemSelect: props.closeDropdownOnItemSelect || true,
        delimiter: props.delimiter || ",",
        freeInput: props.freeInput || true,
        highlightDuplicate: props.highlightDuplicate || true,
        highlightMatchesString: props.highlightMatchesString || true,
        itemValue: props.itemValue || undefined,
        itemText: props.itemText || undefined,
        maxTags: props.maxTags || undefined,
        maxChars: props.maxChars || undefined,
        minChars: props.minChars || 1,
        noResultsLabel: props.noResultsLabel || "No results found",
        placeholder: props.placeholder || "",
        removable: props.removable || true,
        searchMinChars: props.searchMinChars || 1,
        searchOn: props.searchOn || "text",
        selectable: props.selectable || true,
        source: props.source || undefined,
        tagClass: props.tagClass || "tag is-link",
        trim: props.trim || true,
      },
    };
  }

  componentDidMount() {
    this.tagsInput = new BulmaTagsInput(
      this.refs.tagsInput,
      this.state.options
    );
  }

  render() {
    const { attribute, label, value, placeholder, changed } = this.props;
    return (
      <div className="field">
        <label className="label">{label}</label>
        <div className="control">
          <input
            ref="tagsInput"
            type="text"
            placeholder={placeholder}
            value={value}
            onChange={(event) => changed(event)} // <--- this doesn't get called
            name={attribute}
          />
        </div>
      </div>
    );
  }
}

Hi,
In case of Dynamic data source, using the code supplied in the documentation:

<script>
	document.addEventListener('DOMContentLoaded', function() {
		const tagsInput = document.getElementById('tags-with-source');
		new BulmaTagsInput(tagsInput, {
			source: async function(value) {
				// Value equal input value
				// We can then use it to request data from external API
				return await fetch("https://restcountries.eu/rest/v2/name/" + value)
					.then(function(response) {
						return response.json();
					});
		  	}
	  	});
	}, false);
</script>

it is not clear to me how data should be returned from the server.
I have a JSON object like this:

[{"name":"Allemand","text":"Allemand"},{"name":"Animateur D'Art","text":"Animateur D'Art"}]

returned from my server, and it's not rendered correctly (it appears in the list as undefined).
Thanks in advance, any help is really appreciated.

When using a "multiple" select element like so, only one item seems to get selected by default:

<select multiple data-type="tags">
    <option value="one" selected>One</option>
    <option value="two" selected>Two</option>
    <option value="three">Three</option>
</select>

Tags that are larger than the input area cause an overflow that isn't handled.

A quick fix for this should be something along the lines of:

  .tags-input .tag {
    display: inline-block;
    overflow-wrap: break-word;
    white-space: normal;
    height: auto;
    max-width: calc(100% - 1rem); 
  }

How can I make its search non-case-sensitive for the select element?
e.g The option is "Two" and you search "two", it says nothing found.

new stylesheet cdn link:
https://cdn.jsdelivr.net/npm/@creativebulma/[email protected]/dist/css/bulma-tagsinput.min.css

eg if you have a source:

source: async function(value) {
   console.log(value);
   return [value];
}

You would expect that whatever the user typed will always appear in the list of available tags.

This is not the case when dealing with strings such as the following:

'Something A'
'Something B'

Because the value that is sent to the source function for these 2 values is:

SomethingA
SomethingB

As soon as the second word in this string is more than one character, correct behaviour resumes.

<select multiple data-type="tags" disabled>
    <option value="one" selected>One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

Tags can still be removed by clicking the delete button.

Hi,
I've been through the few issues mentionning this : It would be very nice to be able to autocomplete tags by using the select element AND beeing able to add custom values that are not listed in the options of the select.
The hacky solution now is to use a datalist next to the input field, but its rendering isnt done using the style of this plugin, and depends on the browser implementation (its quite ugly most of the time).

I use bulma-tagsinput in a form with name attribute "tags". See this (written in pug.js):

form(id="group-form")
  .field
    label.label Name of group
    .control
      input.input(type="text", name="name", placeholder="Discrete Maths" required)
  .field
    label.label(for="tags") Tags
    .control
      input.input(type="tags", name="tags", id="tags", placeholder="Add tags", value="midterm")
(...)

When I would submit the form, FormData shows two objects under the same key: "tags". One of them has the value of a blank string, the other's value has the data from tagsinput.

Can you tell me what could be behind this?

I already solved it with deleting the blank object, yet I want to know if I was wrong and I could have solved the duplication problem.

Hello,

Dynamic source mode fails on mobile Chrome browser (V 87.0.4280.66):

• Suggestion list is not populated or triggered when typing
• It is not possible to manually add entries

This renders the extension completely disfunctional on mobile device with this browser, I have not checked other mobile browsers.
To verify this bug, go to the official extension site using mobile Chrome.

Does anyone have a solution for this?

Cheers,
Versath

When itemName and itemValue are allowed to be functions we can easier control external data and map it to how we want it to be.

In almost all instances I'm using BulmaTagsInput in object mode (numeric id and string text value pairs), with XHR suggestion source, on an <input type="text"> field.

In certain use cases, it would be really useful to be able to create a new tag, rather than just selecting from existing ones.

Based on the following code currently creating a POST value of comma-delimited IDs...

    var tags = tagInputField.BulmaTagsInput().items;
    var values = [];
    tags.forEach(function(item) {
        values.push(item.id);
    });
    tagInputField.value = values.join(",");

... I would then expect any new values to be passed as an escaped text value, so the value received by the server might be something like 34,375,"Tokyo",698,"Badger\'s Lair",800 - and then obviously up to the server to create new records with the corresponding Tokyo and Badger's Lair text values, at the same time it records the IDs 34, 375, 698 and 800.

Might this be possible to implement, please?

Hello guys :)

Apparently there is mismatch with old way of Bulma 0.94 to integrate this plugin

I've got this error once I've migrate to Bulma v1
$tagsinput-selected-background-color: $primary !default

Could be relative of the way of Saas variables are accessible from now

Thanks to you

Now the bulma-tagsinput supports defining non-removable option to the whole component.
But sometimes we need to make it per-tag. Some default tags should not be removable, and the new one could.

Thanks for your consideration.

Here's a feature request for this great lib:

The current behaviour is that when in freeInput mode and the user changes their focus (a blur event occurs), their text is left in the input element but not added to the collection of tags.

It would be great if there was an option to add their input as a tag when on blur.

In the meantime, this works:

var el = new BulmaTagsInput(document.getElementById(elementId), options);
el.add(tags);
el.input.onblur = function () {
  el.add(el.input.value);
  el.input.value = "";
};

(but I'm not sure how it would work with other configurations of BulmaTagsInput)

Currently freeInput doubles as search filter for the dropdown but the user can't add their own tags anymore once a source is initialized. I'd like the dropdown to show tags that are already available but still allow the user to create new tags.

Currently I'm doing a workaround by adding a link in the no results label that adds the current search text but it's not great

    new BulmaTagsInput(document.getElementById("tags"), {
        freeInput: true,
        allowDuplicates: false,
        caseSensitive: false,
        itemValue: "value",
        itemText: "name",

        noResultsLabel: "No results, <a class='lnkAddCurrentTag'>add current search text</a>",
        source: [{ name: "work", value: "work" },  { name: "school", value: "school" } ]
    });
    $(document).on("click", ".lnkAddCurrentTag", null, () => {
        var tags = <any>$("#tags").get(0);
        var searchText = tags.BulmaTagsInput().input.value;
        tags.BulmaTagsInput().add({ name: searchText, value: searchText });
        $(tags.BulmaTagsInput().container).removeClass("is-active");
        tags.BulmaTagsInput().input.value = "";
    });

I've been battling with this weird error for some time now. Wonder if anyone can help. Basically I have this code:

<div class="control">
<input class="input" data-type="tags" data-item-text="name" data-item-value="numericCode" data-case-sensitive="false" value="" type="text" name="job[skill_list]" id="job_skill_list" />
</div>

...

What I want to do is add the dynamic data, and I'm using the default test data for now. If I try this

document.addEventListener('DOMContentLoaded', function() {
    console.log('you');
    var tagsInputElem = document.getElementById('job_skill_list');
    new BulmaTagsInput(tagsInputElem, {
      source: async function(value) {
        // Value equal input value
        // We can then use it to request data from external API
        return await fetch("https://restcountries.eu/rest/v2/name/" + value)
          .then(function(response) {
            return response.json();
          });
        }
      });
  }, false);

Nothing happens, and no errors in console. The input field is just a regular input field. So I tried to attach only, and got the not a function error

if($('.tagsinput').length == 0 ) {
    var tagsinput = BulmaTagsInput.attach();
  }

It's a Rails app, and the BulmaTagsInput seems to be loading fine. Below is line from application.js.

BulmaTagsInput = require('@creativebulma/bulma-tagsinput')

And here is the Yarn.lock snippet

"@creativebulma/bulma-tagsinput@^1.0.3":
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/@creativebulma/bulma-tagsinput/-/bulma-tagsinput-1.0.3.tgz#bbf38aad9a4ed0f04f2baa7832b21679cdc54462"
  integrity sha512-uQg0KEBcvEmSfwozv2EkFtqai1+pwOgunt3YLlADjRuyKXQePcR3nPW4EDnLMsCt9XlDr4RLu5pcp3XwHIhaOQ==

Sorry for the long ticket. Any idea what could be wrong?

For example you can see this in effect in the documentation itself given your response time to the dynamic data source is high enough.

• Go to Dynamic Data Source on: https://bulma-tagsinput.netlify.app/get-started/usage/
• Type a country name as quickly as you can without making a typo
• If I type "New Z" in 0.2 sec and my response time from the server is 0.21 sec, 4 fetch calls will be fired to return a source. Once the 4 different fetch calls have completed, the autocompleted tags are now populated with "New Zealand" 4 different times.

Hi,

I'm desperately trying to get the tags input to work in combination with the Turbolinks framework. Turbolinks caches the DOM and restores the cached DOM on certain navigation events. That implies that the whole Javascript context persists accross page loads (App feels like an SPA)

When I attach the BulmaTagsInput using new BulmaTagsInput(someDOMElement), it will attach behavior and modify the element's DOM. This modified DOM is subsequently cached by the Turbolinks framework.
Now, when Turbolinks restores a DOM from its cache, it restores the already prepared BulmaTagsInput DOM, but not the associated BulmaTagsInput instance that is required to manage the component's state. Thus I need to create a new instance of BulmaTagsInput which inevitably performs the DOM modifications again in its constructor and I end up with multiple artificial DOM elements.

In order for this to work, the BulmaTagsInput would need to detect whether the required DOM elements have already been created and if so, opt put of creating them again. Or maybe you have some different ideas on how to get this to work?

We run into public usability with this plugin. They don't understand they have to press comma or enter to input the tag, if they are only inputting one value (manual input)

onBlur tagsinput should really take whats sitting in the input value and make a tag out of it.

Currently I think there is no easy way to select a drop down item other than the tab key. This does not feel natural compared to most search suggestions on other sites. May be allow down and up arrow key to select an item form the search drop down list

• add an option sourceDefaultSelection (or something like that) which accepts the same values as the source option
• a dev could then fetch a list of most commonly used tags, or if the list is small, the complete list of tags to help the user get an overview over what to select
• this list would appear if the user clicks in the text field (exactly like when using a select element)

Links such as https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tagsinput/dist/css/bulma-tagsinput.min.css
point to the wrong url, jsdelivr must've had some changes done, because their url structure changed a little bit an now the correct one should be https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tagsinput/dist/css/bulma-tagsinput.min.css