decaporg / decaporg/decap-cms

Custom preview components have undefined value for object fields

Open
#2,150 4 comments 1 reaction 0 assignees View on GitHub
area: extensions/widgets exp: intermediate kind: bug status: confirmed
Dominant language
JavaScript
Stars
19.4k
Forks
3.1k
Avg merge
1d 14h
Merged PRs (30d)
9

Description

**Describe the bug**
A preview component for a custom widget that represents a field with a value that's an object receives an `undefined` `props.value`.

The line https://github.com/netlify/netlify-cms/blob/f4b6e8dc15a6140415c975708732a5988c07404c/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js#L39 sets the `value` prop of the widget's PreviewComponent to `value.get(field.get('name'))` when the value is presented as a Map. I guess this is so that child widgets of the built-in object widget get the correct value of the child field rather than the parent, however it means that custom widgets get passed `value.get(field.get('name'))` rather than `value`.

I've worked around this by using the field value directly from `this.props.entry` inside the preview component, but if my guess is correct it would be nice and clean if the built-in object widget could handle passing the correct child value prop to its child fields directly, so that custom widgets handling fields stored as objects could have their value prop set.

**To Reproduce**
```js
import React from 'react';

const Preview = ({ value, ...props }) => {
console.log('Preview entry value', props.entry.get('data').get(props.field.get('name'))) // value object
console.log('Preview value', value) // `undefined`
return (

{value}
)
};

export default Preview;
```

**Expected behavior**
```js
import React from 'react';

const Preview = ({ value, ...props }) => {
console.log('Preview value', value) // value object
return (

{value}
)
};

export default Preview;
```

**Applicable Versions:**

- Netlify CMS version: 2.6.0

**CMS configuration**
```yaml
backend:
name: test-repo

collections:
- name: "blogs"
label: "Blogs"
folder: "blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- { label: "article content", name: "article_content", widget: "custom-widget"}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.