Support for preloaded tags, keeping menu open, and freezing tag set

[wildseansy]

Can now pass

{
  name: 'tags',
  title: 'Tags',
  type: 'tags',
  options: {
    //Locks menu from creating new tags (defaults to false)
    frozen: true,
    //Preset of tags (defaults to empty)
    preload: [{label: "Oranges", value: "oranges"}, {label: "Apples", value: "apples"}],
    //Closes menu after tag selected (defaults to true)
    closeMenuOnSelect: true
  }
}

Screenshots:

For definition:

    {
      name: "fruits",
      title: "Fruit favorites",
      type: "tags",
      options: {
        preload: [
          { value: "apples", label: "Apples" },
          { value: "oranges", label: "Oranges" },
          { value: "blueberries", label: "Blueberries" },
          { value: "peaches", label: "Peaches" },
          { value: "Bananas", label: "Bananas" },
        ],
        frozen: true,
        closeMenuOnSelect: false,
      },

Note can't create any other tags:

[wildseansy]

@rosnovsky - Please take a look at this feature when you have some time. These features are really nice for limiting the enumerations of possible tags from CMS managers.

[mwdossantos]

Will this become a feature of the plugin? Can't seem to figure out how to have pre-filled tags that can be used?

[wildseansy]

@mwdossantos - can just copy this file and specify it as an input component

# Run this to add the react-select dropdown library
yarn add react-select

Then

import autocompleteTagsComponent from "../../components/autocompleteTags";

///...In your schema:
    {
      name: "tags",
      title: "Tags",
      type: "array",
      of: [{ type: "tag" }],
      inputComponent: autocompleteTagsComponent,
      options: {
        preload: [{ value: "preloaded_tag", label: "Preloaded Tag" }],
        frozen: false,
        closeMenuOnSelect: false,
        fieldName: "roles",
      },
      fieldset: "attributes",
    },

and then also import the tag object into your schema.

export default {
  title: "Tag",
  type: "object",
  name: "tag",
  fields: [
    {
      name: "value",
      type: "string",
    },
    {
      name: "label",
      type: "string",
    },
  ],
};

[runeb]

This looks pretty great, and matches requests I've heard from folks. Any change you'll merge @rosnovsky ?

[rosnovsky]

Sorry, folks, got caught up in something.

Merged, and thank you for your contributions!! 🙇🏻