Fixes #7546 - Relation widget shows "No {{fields.name}}" when collapsed and search returns "No options" by BiaDrab · Pull Request #7657 · decaporg/decap-cms

BiaDrab · 2025-11-06T14:22:38Z

Summary

This PR addresses the relation widget bugs reported in issue #7546 and discovers an additional related issue during investigation.

Issues Found and Fixed

Issue #7546 (Primary)

Collapsed state showed placeholder - "No featured_entries" instead of selected entry title
Search functionality broken - Queries returned "No options" even with matching entries
New entries unselectable - Admin-created entries missing slug field required by relation widget

Additional Issue (Discovered)
4. Duplicate entry selection allowed - Same entry could be selected multiple times in the Top Posts list.

Root Causes

List summary referenced non-existent '{{title}}' field instead of actual relation field '{{fields.featured_entries}}'
Entries collection lacked slug field definition, causing newly created entries to be missing this required identifier
Relation widget couldn't match entries without slug value
No deduplication mechanism to prevent selecting the same entry twice

Solution:

Changed the list summary from '{{title}}' to '{{fields.featured_entries}}' to display the selected entry name
Added the slug field to the entries collection form so it's available in front matter
The relation widget now properly uses value_field: "slug" without extra braces

Testing

Create entry via admin UI with title and slug
Select entry in Top Posts dropdown - search works
Collapsed state displays entry title (not "No featured_entries")
Relation widget properly stores slug value
Multiple entries can be added without duplicates
Same entry cannot be selected twice in the same list

Configuration Changes

Homepage - Top Posts
summary: '{{fields.featured_entries}}' # Changed from '{{title}}'
# Entries collection - added slug field
- {label: "Slug", name: "slug", widget: "string", hint: "URL-friendly version (use hyphens, no spaces)"}

martinjagodic · 2025-11-11T09:48:55Z

@BiaDrab before I review, please make sure that tests are passing.

…rab/decap-cms into fix/widget-return-no-option

packages/decap-cms-backend-git-gateway/src/netlify-lfs-client.ts

packages/decap-cms-backend-bitbucket/src/git-lfs-client.ts

yanthomasdev · 2026-02-11T18:55:13Z

packages/decap-server/package.json

    "test:watch": "yarn test --watch",
-    "test:coverage": "yarn test --coverage"
+    "test:coverage": "npm test -- --coverage"


yarn shouldn't be used anymore I believe, I'll make a new PR to fix that.

Copilot

Pull request overview

This PR appears intended to address relation widget UX issues (collapsed display/search) and prevent duplicate selections in list-based relation fields. In the actual diffs provided, the main functional change is duplicate-selection prevention in the list widget, along with updates to the dev-test configuration/fixtures and some dependency/script adjustments.

Changes:

Add duplicate-selection detection for relation fields inside ListControl and display an inline error banner.
Update ListControl Jest snapshots to match the new render output.
Add dev-test config/fixtures and update root dependencies/lockfiles (currently introducing some configuration and dependency issues).

Reviewed changes

Copilot reviewed 6 out of 8 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
packages/decap-server/package.json	Adjusts `test:coverage` script (now mixes npm/yarn invocation).
packages/decap-cms-widget-list/src/ListControl.js	Adds duplicate detection + inline error banner for relation fields; changes render wrapper.
packages/decap-cms-widget-list/src/tests/snapshots/ListControl.spec.js.snap	Snapshot updates reflecting ListControl DOM changes.
package.json	Adds `decap-cms`, `decap-cms-app`, `decap-server` dependencies (problematic in a monorepo that already contains these workspaces).
package-lock.json	Lockfile updated to include the above dependencies (encodes a self-dependency).
dev-test/config.yml	Appends a second top-level `collections:` block (overrides existing config) and includes incomplete `filter` rules.
dev-test/assets/images/computer-monitor-is-desk-with-rainbow-colored-background_763111-288451.jpg	Adds an image whose header indicates AVIF despite `.jpg` extension.
content/entries/2024-01-15-top-10-best-camping-cocktails.md	Adds a content entry fixture.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-11T18:58:24Z

dev-test/config.yml

        widget: string
    meta: { path: { widget: string, label: 'Path', index_file: 'index' } }
+
+collections:


dev-test/config.yml already defines collections: earlier in the file; adding a second top-level collections: key here will override the original one in YAML parsers, effectively discarding the existing dev-test collections configuration. This should be merged into the existing collections array instead of redefining the key.

Suggested change

collections:

Copilot · 2026-02-11T18:58:24Z

dev-test/config.yml

+          - label: "Top Posts"
+            name: "top_posts"
+            widget: "list"
+            summary: '{{title}}'
+            fields:
+              - label: "Post"
+                name: "featured_entries"
+                widget: "relation"
+                collection: "entries"
+                max: 4
+                search_fields: ["title", "publications", "topics"]
+                display_fields: ["{{title}}"]
+                value_field: "{{slug}}"
+          - {label: "Instagram Heading", name: ig_heading, widget: string}


The new dev-test config block still uses summary: '{{title}}' and value_field: "{{slug}}", which doesn’t align with the PR description (claims summary/value_field changes to fix #7546). If this file is meant to be the reproduction/fixed config, update it to reflect the intended fixed configuration so the dev-test environment validates the bugfix.

Copilot · 2026-02-11T18:58:25Z

package.json

+    "decap-cms": "^3.8.4",
+    "decap-cms-app": "^3.8.4",


Root package.json is for the decap-cms monorepo (workspaces include packages/*, and packages/decap-cms + packages/decap-cms-app exist). Adding published decap-cms/decap-cms-app as dependencies here creates a self-dependency and can cause duplicate installs / resolution conflicts. These entries should be removed, or if you truly need to reference workspace packages, use the workspace protocol instead of semver from npm.

Suggested change

"decap-cms": "^3.8.4",

"decap-cms-app": "^3.8.4",

Copilot · 2026-02-11T18:58:25Z

package.json

    "cypress": "^12.17.4",
    "cypress-jest-adapter": "^0.1.1",
    "cypress-plugin-tab": "^1.0.0",
+    "decap-server": "^3.3.1",


Similarly, adding decap-server as a devDependency at the repo root will pull the published package even though packages/decap-server is part of this workspace. This is likely to introduce duplicate copies and version skew; prefer using the workspace package or referencing it via workspace:* if needed for tooling.

Suggested change

"decap-server": "^3.3.1",

"decap-server": "workspace:*",

Copilot · 2026-02-11T18:58:25Z

packages/decap-cms-widget-list/src/ListControl.js

+          this.duplicateErrorIndex = index;
+          this.forceUpdate();
+
+          return;
+        }
+      }
+
+      if (this.duplicateErrorIndex === index) {
+        this.duplicateErrorIndex = null;


This introduces UI state via an ad-hoc instance property + forceUpdate(). That bypasses React state flow and makes the behavior harder to reason about and test. Prefer storing the duplicate error in component state (and updating it alongside list mutations) so renders are driven by setState.

Suggested change

this.duplicateErrorIndex = index;

this.forceUpdate();

return;

}

}

if (this.duplicateErrorIndex === index) {

this.duplicateErrorIndex = null;

this.setState({ duplicateErrorIndex: index });

return;

}

}

if (this.state && this.state.duplicateErrorIndex === index) {

this.setState({ duplicateErrorIndex: null });

Copilot · 2026-02-11T18:58:26Z

dev-test/config.yml

+    folder: "content/entries" # The path to the folder where the documents are stored
+    create: true # Allow users to create new documents in this collection
+    filter: {field: "headless"}
+    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
+    sortable_fields: ['title', 'date']


filter rules require both a field and a value. With only field: "headless", the backend filter logic will compare entry.data.headless === undefined, which will likely filter out all entries that have headless: true. Add an explicit value (e.g. true) if the intent is to include only headless entries.

Copilot · 2026-02-11T18:58:26Z

dev-test/config.yml

+    folder: "content/pages" # The path to the folder where the documents are stored
+    create: true # Allow users to create new documents in this collection
+    filter: {field: "headless"}
+    slug: "{{title}}" # Filename template, e.g., YYYY-MM-DD-title.md
+    sortable_fields: ['title', 'date']


Same issue here: filter: {field: "headless"} omits the required value, so the filter will match only entries where headless is undefined. Specify value: true/false (or remove the filter) depending on the intended behavior.

Copilot · 2026-02-11T18:58:26Z

packages/decap-cms-widget-list/src/ListControl.js

+      if (f.get('widget') === 'relation') {
+        const isDuplicate =
+          value &&
+          value.some((item, idx) => {
+            if (idx === index) return false;
+            const itemValue = withNameKey ? item.get(f.get('name')) : item;
+            return itemValue === newValue;
+          });
+
+        if (isDuplicate) {
+          console.warn(`⚠️ Duplicate: "${newValue}" already selected`);
+
+          this.duplicateErrorIndex = index;
+          this.forceUpdate();
+
+          return;
+        }
+      }
+
+      if (this.duplicateErrorIndex === index) {
+        this.duplicateErrorIndex = null;
+      }


duplicateErrorIndex is stored as a list index. If the user removes/reorders items after triggering a duplicate error, the index can point to a different item and show the error on the wrong row (or fail to clear). Consider tracking the error by the item key (this.state.keys[index]) or resetting/updating the duplicate marker on remove/sort.

Copilot · 2026-02-11T18:58:26Z

packages/decap-cms-widget-list/src/ListControl.js

+        {hasDuplicateError && (
+          <div
+            style={{
+              background: '#fee',
+              color: '#c33',
+              padding: '12px',
+              marginBottom: '12px',
+              borderRadius: '4px',
+              border: '1px solid #fcc',
+              fontSize: '14px',
+              fontWeight: 'bold',
+            }}
+          >
+            ❌ This entry is already selected in this list
+          </div>


The duplicate-selection banner is hard-coded (inline styles + emoji) and not localized, even though this component already receives t for translations. Please route this through the existing styling system (emotion styles/theme) and use a translated message via t(...) so it’s consistent and accessible.

Copilot · 2026-02-11T18:58:27Z

packages/decap-cms-widget-list/src/ListControl.js

+      if (f.get('widget') === 'relation') {
+        const isDuplicate =
+          value &&
+          value.some((item, idx) => {
+            if (idx === index) return false;
+            const itemValue = withNameKey ? item.get(f.get('name')) : item;
+            return itemValue === newValue;
+          });
+
+        if (isDuplicate) {
+          console.warn(`⚠️ Duplicate: "${newValue}" already selected`);
+
+          this.duplicateErrorIndex = index;
+          this.forceUpdate();
+
+          return;
+        }


New duplicate-prevention behavior isn’t covered by unit tests. Since ListControl.spec.js already exists, please add a test that selecting a duplicate relation value does not call onChange and that the duplicate error message is shown/cleared appropriately.

yanthomasdev · 2026-02-11T19:03:01Z

Thanks @BiaDrab, Copilot found a few things, could you take a look and update your PR accordingly? 🙌

fix: prevent duplicate entries in list widget with relation field

57abe58

BiaDrab requested a review from a team as a code owner November 6, 2025 14:22

Merge branch 'main' into fix/widget-return-no-option

26b82a2

BiaDrab and others added 9 commits November 11, 2025 11:31

Merge branch 'main' into fix/widget-return-no-option

1b586b4

fix: resolve linting errors and snapshot test failures

1e018a1

fix: resolve merge conflicts

cd7206e

Merge branch 'fix/widget-return-no-option' of https://github.com/BiaD…

5fbc1ff

…rab/decap-cms into fix/widget-return-no-option

fix: resolve ESLint warnings and restore original tests

01e3465

Merge branch 'decaporg:main' into fix/widget-return-no-option

065c794

fix(widgets): handle case when widget returns no option

ed43051

Merge branch 'fix/widget-return-no-option' of https://github.com/BiaD…

d462d3a

…rab/decap-cms into fix/widget-return-no-option

Merge branch 'main' into fix/widget-return-no-option

1d244f6

yanthomasdev reviewed Feb 11, 2026

View reviewed changes

packages/decap-cms-backend-git-gateway/src/netlify-lfs-client.ts Outdated Show resolved Hide resolved

yanthomasdev reviewed Feb 11, 2026

View reviewed changes

packages/decap-cms-backend-bitbucket/src/git-lfs-client.ts Outdated Show resolved Hide resolved

yanthomasdev added 2 commits February 11, 2026 14:16

Remove eslint disable rule comment

a0bd57f

Remove eslint disable rule comment

7c31ad7

yanthomasdev assigned yanthomasdev and Copilot and unassigned yanthomasdev Feb 11, 2026

yanthomasdev requested a review from Copilot February 11, 2026 18:51

yanthomasdev unassigned Copilot Feb 11, 2026

Copilot started reviewing on behalf of yanthomasdev February 11, 2026 18:51 View session

yanthomasdev reviewed Feb 11, 2026

View reviewed changes

Copilot AI reviewed Feb 11, 2026

View reviewed changes

Uh oh!

Conversation

BiaDrab commented Nov 6, 2025

Summary

Issues Found and Fixed

Solution:

Testing

Configuration Changes

Uh oh!

martinjagodic commented Nov 11, 2025

Uh oh!

Uh oh!

Uh oh!

yanthomasdev Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

yanthomasdev commented Feb 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Comments

yanthomasdev Feb 11, 2026 •

edited

Loading