The expand/collapse button not rendered for top-level fields

[stanch]

Although it works in the demo, in our code the arrow is missing (left of “items”):

Here is how attributes-kit is being used:

require.config({
    paths: {
        'react': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min',
        'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min',
        'attributes-kit': 'https://npmcdn.com/attributes-kit/dist/attributes-kit-no-react'
    }
});

var dataStructures = ...;
var element = ...;
var target = ...;

require([
    'react',
    'react-dom',
    'attributes-kit'
], function(React, ReactDom, AttributesKit) {
    var component = React.createElement(AttributesKit.Attributes, {
        element: element,
        dataStructures: dataStructures,
        collapseByDefault: true,
        namedTypes: false,
        title: 'hide'
    });
    ReactDom.render(component, target);
});

[XVincentX]

Would it be possible to provide the used dataStructures object?

[stanch]

It happens with this basic MSON:

# Data Structures

## Payment

- items (array) - The list of items that were paid for.
    - (Item)

## Item

- quantity: 3 (number) - The purchased quantity of this specific item.

var dataStructures = [
  {
    "element": "object",
    "meta": {
      "id": "Payment"
    },
    "content": [
      {
        "element": "member",
        "meta": {
          "description": "The list of items that were paid for."
        },
        "content": {
          "key": {
            "element": "string",
            "content": "items"
          },
          "value": {
            "element": "array",
            "content": [
              {
                "element": "Item"
              }
            ]
          }
        }
      }
    ]
  },
  {
    "element": "object",
    "meta": {
      "id": "Item"
    },
    "content": [
      {
        "element": "member",
        "meta": {
          "description": "The purchased quantity of this specific item."
        },
        "content": {
          "key": {
            "element": "string",
            "content": "quantity"
          },
          "value": {
            "element": "number",
            "content": 3
          }
        }
      }
    ]
  }
];

var element = {
  "element": "object",
  "meta": {
    "id": "Payment"
  },
  "content": [
    {
      "element": "member",
      "meta": {
        "description": "The list of items that were paid for."
      },
      "content": {
        "key": {
          "element": "string",
          "content": "items"
        },
        "value": {
          "element": "array",
          "content": [
            {
              "element": "Item"
            }
          ]
        }
      }
    }
  ]
};