Skip to content

Relation widget limits visible options and affects search when preselected values exist #7770

@milianriedel

Description

@milianriedel

Describe the bug

When using a relation widget with multiple preselected items, the select dropdown only shows the first ~17 options, even though there are many more available (e.g. 74 total).

When searching, the results are still limited to those same ~17 options.

However, if I remove one of the preselected items and then search again, the search suddenly works across all available options (even though the dropdown still visually shows only ~17 items).


To Reproduce

  1. Configure a relation widget with many available options (e.g. 70+)
  2. Preselect multiple items in the field
  3. Open the select dropdown
  4. Try to select another item
  5. Observe that only ~17 options are visible
  6. Try searching → returns original first ~17 options
  7. Remove one preselected item
  8. Search again → now results include all options

Expected behavior

The dropdown and search should always work across all available options, regardless of how many items are already preselected.


Video

https://github.com/user-attachments/assets/6abc389e-8f09-41e5-b702-3d90fa39c39b

Applicable Versions

  • Decap CMS version: Latest
  • Git provider: Github
  • OS: MacOS & Windows
  • Browser version: Latest Chrome and Brave
  • Node.JS version: 24

CMS configuration

  name: git-gateway
  branch: main

local_backend: true

# Netlify Identity email templates
email_invite_template: /admin/invite.html
email_confirmation_template: /admin/confirmation.html
email_password_reset_template: /admin/password-reset.html
email_email_change_template: /admin/email-change.html

media_folder: public/assets
public_folder: /assets

slug:
  encoding: "ascii"
  clean_accents: true
  sanitize_replacement: "-"

collections:
  - name: "event"
    label: "Events"
    folder: "content/events"
    label_singular: "event"
    create: true
    editor:
      preview: false
    fields:
      - { name: "templateKey", label: "Template Key", widget: "hidden", default: "event"}
      - { name: "title", label: "Year", widget: "string" }
      - { name: "date", label: "Date start", widget: "datetime", date_format: "D. M. YYYY", time_format: false, required: true}
      - { name: "dateEnd", label: "Date end", widget: "datetime", date_format: "D. M. YYYY", time_format: false, required: true}
      - label: "Registration status"
        name: "registrationStatus"
        widget: "select"
        default: "preparation"
        options: ["preparation", "open", "close", "postponed", "canceled", "past"]
      - { name: "registrationOpeningDate", label: "Registration opening date", widget: "datetime", date_format: "D. M. YYYY", time_format: false, required: false}
      - { name: "theme", label: "Main topic", widget: "string", required: false,}
      - { name: "event1formURL", label: "MALI registration URL", widget: "string", required: false,}
      - { name: "event2formURL", label: "MSLI registration URL", widget: "string", required: false,}
      - { name: "event1price", label: "Price MALI", widget: "string", required: false }
      - { name: "event2price",label: "Price MSLI", widget: "string", required: false }
      - { name: "placeName",label: "Location name", widget: "string", required: false, default: "Český Šternberk"}
      - { name: "placeURL", label: "Location URL", widget: "string", required: false, default: "https://g.page/parkhotelceskysternberk?share"}
      - { name: "body", label: "Summary after event", widget: "markdown", required: false}

      - label: "Speakers"
        name: "speakers"
        widget: "relation"
        collection: "profiles"
        multiple: true
        required: false
        search_fields: ["name"]
        value_field: "{{slug}}"
        display_fields: ["name"]

      - { name: "program", label: "Program in PDF", widget: "file", required: false}
      - { label: "Program as text", name: "programSimple", widget: "markdown", buttons: ["heading-three", "heading-four", "bold"], required: false }
      - { name: "programActive", label: "Daily program visible", widget: "boolean", required: false, default: false }
      - label: "Program thursday"
        name: "programThursday"
        widget: "list"
        collapsed: true
        label_singular: "lecture"
        required: false
        summary: "{{programTimeStart | date('H:mm')}}–{{programTimeEnd | date('H:mm')}} - {{programEvent1speaker}} / {{programEvent2speaker}}"
        fields:
          - {name: "programTimeStart", label: "Lecture start", default: "",  widget: "datetime", date_format: false, time_format: "HH:mm", required: false}
          - {name: "programTimeEnd", label: "Lecture end", widget: "datetime", date_format: false, time_format: "HH:mm", required: false, default: ""}
          - {name: "programUnited", label: "United lecture", widget: "boolean", required: false, default: false }
          - label: "Speaker MALI / Speaker united lecture / Activity"
            name: "programEvent1speaker"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent1topic", label: "Topic MALI", widget: "string", required: false}
          - label: "Speaker MSLI"
            name: "programEvent2speaker"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent2topic", label: "Topic MSLI", widget: "string", required: false}

      - label: "Program friday"
        name: "programFriday"
        widget: "list"
        collapsed: true
        label_singular: "lecture"
        required: false
        summary: "{{programTimeStart | date('H:mm')}}–{{programTimeEnd | date('H:mm')}} - {{programEvent1speaker}} / {{programEvent2speaker}}"
        fields:
          - {name: "programTimeStart", label: "Lecture start", default: "",  widget: "datetime", date_format: false, time_format: "HH:mm", required: false}
          - {name: "programTimeEnd", label: "Lecture end", widget: "datetime", date_format: false, time_format: "HH:mm", required: false, default: ""}
          - {name: "programUnited", label: "United lecture", widget: "boolean", required: false, default: false}
          - label: "Speaker MALI / Speaker united lecture / Activity"
            name: "programEvent1speaker"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent1topic", label: "Topic MALI", widget: "string", required: false}
          - label: "Speaker MSLI"
            name: "programEvent2speaker"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent2topic", label: "Topic MSLI", widget: "string", required: false}

      - label: "Program saturday"
        name: "programSaturday"
        widget: "list"
        collapsed: true
        label_singular: "lecture"
        required: false
        summary: "{{programTimeStart | date('H:mm')}}–{{programTimeEnd | date('H:mm')}} - {{programEvent1speaker}} / {{programEvent2speaker}}"
        fields:
          - {name: "programTimeStart", label: "Lecture start", default: "",  widget: "datetime", date_format: false, time_format: "HH:mm", required: false}
          - {name: "programTimeEnd", label: "Lecture end", widget: "datetime", date_format: false, time_format: "HH:mm", required: false, default: ""}
          - {name: "programUnited", label: "United lecture", widget: "boolean", required: false, default: false}
          - label: "Speaker MALI / Speaker united lecture / Activity"
            name: "programEvent1speaker"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent1topic", label: "Topic MALI", widget: "string", required: false}
          - label: "Speaker MSLI"
            name: "programEvent2speaker"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent2topic", label: "Topic MSLI", widget: "string", required: false}

      - label: "Program sunday"
        name: "programSunday"
        widget: "list"
        collapsed: true
        label_singular: "lecture"
        required: false
        summary: "{{programTimeStart | date('H:mm')}}–{{programTimeEnd | date('H:mm')}} - {{programEvent1speaker}} / {{programEvent2speaker}}"
        fields:
          - {name: "programTimeStart", label: "Lecture start", default: "",  widget: "datetime", date_format: false, time_format: "HH:mm", required: false}
          - {name: "programTimeEnd", label: "Lecture end", widget: "datetime", date_format: false, time_format: "HH:mm", required: false, default: ""}
          - {name: "programUnited", label: "United lecture", widget: "boolean", required: false, default: false}
          - label: "Speaker MALI / Speaker united lecture / Activity"
            name: "programEvent1speaker"
            widget: "relation"
            collection: "profiles"
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent1topic", label: "Topic MALI", widget: "string", required: false}
          - label: "Speaker MSLI"
            name: "programEvent2speaker"
            widget: "relation"
            collection: "profiles"
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - {name: "programEvent2topic", label: "Topic MSLI", widget: "string", required: false}
      - label: "MSLI Documents"
        name: "documents"
        widget: "list"
        collapsed: true
        label_singular: "document"
        required: false
        fields:
          - label: "Speaker"
            name: "documentSpeaker"
            widget: "relation"
            collection: "profiles"
            required: false
            search_fields: ["name"]
            value_field: "{{slug}}"
            display_fields: ["name"]
          - label: "Document Items"
            name: "documentItems"
            widget: "list"
            collapsed: true
            label_singular: "item"
            required: true
            fields:
              - {name: "documentName", label: "Document name", widget: "string"}
              - {name: "documentLink", label: "Document URL", widget: "string"}
              - {name: "documentAuthor", label: "Document Author", widget: "string", required: false}

      - label: "Images"
        name: "images"
        widget: "list"
        collapsed: true
        label_singular: "image"
        required: false
        fields:
          - label: "Image"
            name: "image"
            widget: "image"
            media_library:
              config:
                multiple: true
          - label: "Description"
            name: "alt"
            widget: "string"

  - name: "profiles"
    label: "Profiles"
    folder: "content/profiles"
    label_singular: "profile"
    create: true
    slug: "{{fields.slug}}"
    identifier_field: "name"
    editor:
      preview: false
    fields:
      - { name: "templateKey", label: "Template Key", widget: "hidden", default: "profile"}
      - { name: "slug", label: "Identificator", widget: "string", required: true, hint: "In format: 'jan-novak'. Do not change after creation and use in events." }
      - { name: "name", label: "Name", widget: "string", required: true }
      - { name: "position", label: "Position", widget: "string", required: false }
      - { name: "description", label: "Description", widget: "markdown", buttons: ["bold", "italic", "link"], required: false }
      - { name: "facebook", label: "Facebook link", widget: "string", required: false }
      - { name: "instagram", label: "Instagram link", widget: "string", required: false }
      - { name: "x", label: "X (Twitter) link", widget: "string", required: false }
      - { name: "homepage", label: "Homepage link", widget: "string", required: false }
      - { name: "linkedin", label: "LinkedIn link", widget: "string", required: false }
      - label: "Photo"
        name: "photo"
        widget: "image"
        required: false
        media_library:
          config:
            multiple: false
      - { name: "graduateYear", label: "Graduate year", widget: "string", required: false }
      - { name: "recommendation", label: "Recommendation", widget: "markdown", buttons: ["bold", "italic", "link"], required: false }

  - name: "settings"
    label: "Settings"
    create: false
    delete: false
    files:
      - file:  "content/settings.md"
        label: 'Homepage, Contact and Alert message'
        name: 'settings'
        fields:
          - { name: "templateKey", label: "Template Key", widget: "hidden", default: "settings"}
          - { name: "contactPhone", label: "Contact phone", widget: "string"}
          - { name: "contactEmail", label: "Contact e-mail", widget: "string"}
          - { name: "alertMessage", label: "Alert message", widget: "string", required: false }
          - { name: "body", label: "Description on homepage", widget: "markdown", buttons: ["heading-two", "bold", "italic", "link", ], required: false }
          - label: "Images"
            name: "images"
            widget: "list"
            collapsed: true
            label_singular: "image"
            required: false
            fields:
              - label: "Image"
                name: "image"
                widget: "image"
                media_library:
                  config:
                    multiple: true
              - label: "Description"
                name: "alt"
                widget: "string"
                default: "Popisek obrázku"
      - file:  "content/donate.md"
        label: 'Donate'
        name: 'donate'
        fields:
          - { name: "templateKey", label: "Template Key", widget: "hidden", default: "donate"}
          - { name: "bank", label: "Bank number", widget: "string"}
          - { name: "iban", label: "Iban number", widget: "string"}
          - { name: "body", label: "Description", widget: "markdown", buttons: ["heading-two", "bold", "italic", "link", ], required: true }
          - label: "Images"
            name: "images"
            widget: "list"
            collapsed: false
            allow_add: false
            label_singular: "image"
            required: true
            fields:
              - label: "Image"
                name: "image"
                widget: "image"
                media_library:
                  config:
                    multiple: false
              - label: "Description"
                name: "alt"
                widget: "string"
                default: "Popisek obrázku"
      - file:  "content/supporters.md"
        label: 'Supporters'
        name: 'supporters'
        fields:
          - { name: "templateKey", label: "Template Key", widget: "hidden", default: "supporters"}
          - { name: "body", label: "Description", widget: "markdown", buttons: ["heading-two", "bold", "italic", "link", ], required: true }
          - label: "Images"
            name: "images"
            widget: "list"
            collapsed: true
            label_singular: "image"
            required: true
            fields:
              - label: "Image"
                name: "image"
                widget: "image"
                media_library:
                  config:
                    multiple: true
              - label: "Description"
                name: "alt"
                widget: "string"
                default: "Popisek obrázku"
      - file: "content/graduates.md"
        label: 'Graduates'
        name: 'graduates'
        fields:
          - { name: "templateKey", label: "Template Key", widget: "hidden", default: "graduates"}
          - label: "Graduates List"
            name: "graduatesList"
            widget: "relation"
            collection: "profiles"
            multiple: true
            required: false
            search_fields: ["name", "graduateYear"]
            value_field: "{{slug}}"
            display_fields: ["name", "graduateYear"]
    editor:
      preview: false

Metadata

Metadata

Assignees

No one assigned

    Labels

    type: bugcode to address defects in shipped code

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions