List widget form input prevents whitespace and commas

[regisphilibert]

Describe the bug When trying to write in list widget input field a comma separated list, it is impossible to add whitespaces or comma. This was introduced with v2.10.65

To Reproduce

1. Add a list widget to any collection fields through config

   - name: tags
   label: Tags
   widget: list

2. Go to CMS dashboard and try and edit the field (using whitespace, commas, tabs etc...)

Expected behavior The user should be able to write in commas and whitespace in the form field.

Applicable Versions:

• Netlify CMS version: 2.10.65 and above
• Git provider: GitBhug
• OS: MacOS Catalina 10.15.7
• Browser version: Chrome Version 86.0.4240.198

CMS configuration https://tnd-modules.netlify.app/cms/config.html

[kalebheitzman]

I have this same issue

[gavgrego]

I also have this issue, spaces should be allowed as characters inside individual tags.

[peruvianidol]

I'm not a JS expert but this line seems to be trimming whitespace whenever the content of the field changes:

https://github.com/netlify/netlify-cms/blob/141a2eba565a6fd8b6d8be200481344550501974/packages/netlify-cms-widget-list/src/ListControl.js#L157

[SeanMcP]

I agree that the list widget should allow spaces.

For a quick fix, you can add a custom widget with the desired behavior. This works for me (and is only slightly modified from the example):

<script>
      var ArrayControl = createClass({
        handleChange: function (e) {
          const separator = this.props.field.get("separator", ", ");
          this.props.onChange(e.target.value.split(separator));
        },

        render: function () {
          const separator = this.props.field.get("separator", ", ");
          var value = this.props.value;
          return h("input", {
            id: this.props.forID,
            className: this.props.classNameWrapper,
            type: "text",
            value: value ? value.join(separator) : "",
            onChange: this.handleChange,
          });
        },
      });

      var ArrayPreview = createClass({
        render: function () {
          return h(
            "ul",
            {},
            this.props.value.map(function (val, index) {
              return h("li", { key: index }, val);
            })
          );
        },
      });

      var schema = {
        properties: {
          separator: { type: "string" },
        },
      };

      CMS.registerWidget("array", ArrayControl, ArrayPreview, schema);
</script>

Then use the array widget in your config.yml:

- label: "Tags"
  name: "tags"
  widget: "array"

Here's what it looks like in the editor:

And then the final data in markdown:

tags:
  - Test One
  - Test Two

[robert-duplock-adg]

As this comes up as the first result on google, I thought I'd suggest another workaround: create a list of string widgets. @file /admin/config.yml

fields:
  - { label: "Tags", name: "tags", widget: "list", summary: "{{fields.tag}}", field: { label: "Tag", name: "tag", widget: "string" }}

[zeroLR]

As this comes up as the first result on google, I thought I'd suggest another workaround: create a list of string widgets. @file /admin/config.yml

fields:
  - { label: "Tags", name: "tags", widget: "list", summary: "{{fields.tag}}", field: { label: "Tag", name: "tag", widget: "string" }}

This solution helped me to resolve this issue ! Thanks ! More informations are on the official documents : https://www.netlifycms.org/docs/configuration-options/#summary

[adriandpdev]

important to fix this

duplicate with https://github.com/decaporg/decap-cms/issues/7167

[Juniors017]

it’s a regression, it used to work for me