[Usage] Bulma tagsinput in React

[jinglescode]

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>
    );
  }
}

[DonyorM]

Would also like to know how to use this component in react

[ykyuen]

I guess it is because the input value was set by javascript by the bulma-tagsinpput and value set by javascript won't trigger onChange event.

My workaround is setting up the 'after.add' and 'after.remove' event and then trigger the handleChange(). The following is what i did for my input component.

...
  const attachTagsInput = () => {
    const tagInput = document.getElementById('<INPUT_ID>');
    const bti = new BulmaTagsInput(tagInput);
    bti.on('after.add', function(data) {
      handleChange();
    });
    bti.on('after.remove', function(data) {
      handleChange();
    });
  };

  useEffect(() => {
    window.addEventListener('DOMContentLoaded', attachTagsInput);
    return () => {
      window.removeEventListener('beforeunload', attachTagsInput);
    };
  }, []);
...