Relation widget bug when using slug as valueField

[andreasbalevik]

Describe the bug
Relation widget is not working when using {{slug}} as value_field as described here https://www.netlifycms.org/docs/widgets/relation/. The autocomplete field only show one suggestion, and when selecting that option no value is assigned to the field. It works perfectly when using title as value_field. The only problem then is that the relation disappears when the title of the related item changes.

To Reproduce

1. Add relation widget

label: Top Activeties
name: top_activeties
widget: relation
collection: <collection to search>
search_fields: ["title"]
value_field: '{{slug}}'
display_fields: ["title"]

Expected behavior
Relation field should show all suggestions. When an item is selected the title should display, and the slug should be the value in the markdown file

Screenshots
Only one suggestion when using slug as valueField

When the item is selected the field is not updated with any value, preventing me from saving the page.

This is what it should look like, but now i use title as value_field

CMS configuration

--- 
backend: 
  branch: master
  name: git-gateway

collections: 
  - 
    create: false
    delete: false
    folder: "_cms_EN_frontpage"
    label: "EN: Frontpage"
    name: frontpage
    slug: "{{slug}}"
    identifier_field: "frontpage"
    editor:
      preview: false
    fields:
      - 
        default: index
        label: Layout
        name: layout
        widget: hidden
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      -
        default: Frontpage
        label: Frontpage
        name: frontpage
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      -
        label: Title 1
        name: title_1
        widget: string
      -
        label: Tekstboks 1
        name: textbox_1
        widget: text
      - 
        label: "Top 3 activeties"
        name: "top_3_activeties"
        widget: "list"
        summary: '{{fields.title}}'
        allow_add: true
        max: 3
        min: 3
        field: {label: Activity,name: top_activeties,widget: relation,collection: en_activity,search_fields: ["title"],value_field: '{{slug}}',display_fields: ["title"]}
      -
        label: Title 2
        name: title_2
        widget: string
      -
        label: Tekstboks 2
        name: textbox_2
        widget: text
      -
        label: Title 3
        name: title_3
        widget: string
      -
        label: Tekstboks 3
        name: textbox_3
        widget: text
      - 
        label: "Gallery"
        name: "galleryImages"
        widget: "list"
        summary: '{{fields.image}}'
        field: {label: Image, name: image, widget: image}
  - 
    create: false
    delete: false
    folder: _cms_EN_faq
    label: "EN: FAQ"
    name: en_faq
    slug: "{{slug}}"
    identifier_field: faq
    editor:
      preview: false
    fields: 
      -
        default: FAQ
        label: FAQ
        name: faq
        widget: hidden
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      -
        default: faq
        label: Layout
        name: layout
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      -
        label: Title
        name: title
        widget: string
      - 
        label: "FAQ"
        name: "faq_list"
        minimize_collapsed: true
        widget: "list"
        fields:
          - {label: Title, name: faq_title, widget: string}
          - {label: Content, name: faq_content, widget: markdown }
  - 
    create: false
    delete: false
    folder: _cms_EN_about
    label: "EN: About"
    name: en_about
    slug: "{{slug}}"
    identity_field: about
    editor:
      preview: false
    fields: 
      -
        default: about
        label: About
        name: about
        widget: hidden
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      -
        default: about
        label: Layout
        name: layout
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      -
        label: Title
        name: title
        widget: string
      -
        label: Body
        name: body
        widget: markdown
  -
    create: true
    folder: _cms_EN_activity
    label: "EN: Activity"
    name: en_activity
    editor:
      preview: false
    slug: "{{slug}}"
    fields: 
      - 
        label: Language
        name: lang
        default: "en"
        widget: hidden
      - 
        default: activity
        label: Layout
        name: layout
        widget: hidden
      -
        label: SEO (search optimalization shorttext)
        name: description
        widget: string
      - 
        label: Title
        name: title
        widget: string
      - 
        label: "Gallery"
        name: "galleryImages"
        widget: "list"
        summary: '{{fields.image}}'
        field: {label: Image, name: image, widget: image}
      - 
        label: Body
        name: body
        widget: markdown
      - 
        label: Price
        name: price
        widget: string
        required: false
      -
        label: Time
        name: time
        widget: string
        required: false
      - 
        label: Peoples
        name: people
        widget: string
        required: false
      -
        label: "Practical information"
        name: practical
        widget: markdown
        required: false

media_folder: static/images/uploads

Additional context
netlify-cms-app 2.14.21
bootstrap.js:85 netlify-cms-core 2.38.0
index.js:27 netlify-cms 2.10.91

[ghost]

Just some additional information from when I encountered this bug this weekend: it only happens when the slug of the target of the relation is something other than "{{slug}}"

So what does not work is:

collections:
  - name: "pages"
    label: "Pagina's"
    files: 
      - name: "pagina"
        ....
        fields: 
          - label: "Page"
            name: "page" 
            widget: "list"
            fields: 
              - label: "Items"
                name: "items"
                widget: "relation"
                collection: "items"
                value_field: "{{slug}}"
                search_fields: ["title"]
  - name: "items"
    label: "Items"
    folder: "content/items"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields: 
      - {label: "Title", name: "title", widget: "string"}
        ...

But what works is:

collections:
  - name: "pages"
    label: "Pagina's"
    files: 
      - name: "de-gelukkigste-klas"
        ....
        fields: 
          - label: "Page"
            name: "page" 
            widget: "list"
            fields: 
              - label: "Items"
                name: "items"
                widget: "relation"
                collection: "items"
                value_field: "{{slug}}"
                search_fields: ["title"]
  - name: "items"
    label: "Items"
    folder: "content/items"
    create: true
    slug: "{{slug}}"
    fields: 
      - {label: "Title", name: "title", widget: "string"}
        ...

[andreasbalevik]

I solved this by using a uuid plugin written for netlify-cms. Seems UUID is a better way for connecting relations than slug.

Feel free to close this, but i would strongly advice working on a way to implement this as a default to netlify cms.