Netlify-cms: Relation Widget Displays Value Instead of DisplayValue on Selection

[Undistraction]

Describe the bug
When both a displayFields and valueFields are supplied to a relations widget, the widget shows the correct values in the autosuggest, but as soon as a value is selected, displays the valueField value.

To Reproduce
Configure a tip collection:

- name: tip
  label: Tips
  folder: src/content/tips
  create: true
  fields:
    - name: uuid
      label: UUID
      widget: uuid
    - name: name
       label: Name
       widget: string
    - name: body
       label: Body
       widget: markdown

Configure a relation widget with the following:

- name: tip
  label: Tip
  widget: relation
  collection: tip
  searchFields: ['name', 'body']
  valueField: uuid
  displayFields: ['name']

When typing text into the widget, the name field of the tips are used. However once a selection is made, the name is no longer displayed, and is replaced by that tip's uuid field.

Expected behavior
The displayed value should always be the value of the displayFields, i.e. the tip's name field.

Screenshots

Suggestions

Selection

Applicable Versions:

• Netlify CMS version: netlify-cms 2.3.2
• Git provider: Gitlab
• OS: OSX
• Browser version: 71.0.3578.98
• Node.JS version: 8.11.3

[papandreou]

This has also bothered me a lot in cases where a user unfriendly uuid is used as the valueField to identify the related entity. To overcome it I've attempted to subclass the relation control so that it fetches the metadata for the related entity as a side effect of being mounted, so it's available to the preview component. I haven't really succeeded with this, and it's obviously much less elegant than having this capability built in.

A close reading of the docs for the relation widget seems to indicate that this behavior is intentional so this is actually a feature request. Apparently the displayFields setting only influences the autocomplete menu, not what is rendered once an entry has been selected:

displayFields: list of one or more names of fields in the referenced collection that will render in the autocomplete menu of the control. Defaults to valueField.

Here's a related discussion that hints at why: https://github.com/netlify/netlify-cms/issues/1896

[Undistraction]

@papandreou Thanks. I misread that documentation, but this definitely _feels_ like a bug. It makes no sense to me that the value you have selected should be replaced by a completely unrelated value. Could another parameter be added to control the rendering of the selected value in the same way you can format the display of a date, but still save the raw date to the field? I guess the difference is that the rendered value needs to be a different field, not a formatting of the existing field.

This a bit of show-stopper for me and I can't see a workaround.

[erquhart]

Yeah...I can't think of a reason why it should be this way. Definitely open to a PR for this.

[Undistraction]

@erquhart Can you be a little more specific please. Would you be happy for the same value as shown in the auto-suggest to be displayed after selection. If so I'd be happy to put this together.

[erquhart]

1936 resolves this, and is very close to merge ready. If you're up for reviewing that would help!

[barthc]

Issue fixed in #1936