directus/directus

M2A Relation Display Not Showing Properly

Open

#25348 opened on Jun 24, 2025

View on GitHub
 (3 comments) (0 reactions) (0 assignees)TypeScript (25,193 stars) (3,505 forks)batch import
BugHelp WantedLow ReachMed ImpactStudioUX / DX

Description

To Reproduce

  1. Create 3 collections:
    • collection_one with name field (set as display template)
    • collection_two with title field (set as display template)
    • collection_three

Image

  1. Configure M2A relation on collection_three:
    • Select the Related Collections: collection_one, collection_two
    • Interface: Leave it empty as default
    • Display: Choose "Related Values"
  2. Create items:
    • Add records in collection_one (e.g., {name: "Ahmed"})
    • Add records in collection_two (e.g., {title: "Admin"})
  3. Link records in collection_three

Describe the Bug

What you will notice after the steps you have done is the following: Interface works perfectly thanks to the recent PR (https://github.com/directus/directus/pull/24503):

Image

But it's not working properly in the display:

Image

And if you added the related values manually in the display tab for example like this: {{collection}}: {{item:collection_one}} {{item:collection_two}} it shows like this:

Image

Expected Result: Same as the interface, it should show the collection name then the "display template" for the collection which is in our case title or name

Directus Version

v11.8.0

Hosting Strategy

Self-Hosted (Docker Image)

Database

No response

Contributor guide

Tech stack
typescriptvuenodejs
Domain
frontendbackend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with Directus M2A relationsBasic Vue.js understandingKnowledge of display system
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
The issue is in the M2A relation display component. Compare with the interface implementation that was fixed in PR #24503 (https://github.com/directus/directus/pull/24503). The display component should show the collection name followed by the display template value. Investigate the display component files in the app/src/modules/collections/ or app/src/views/ directory. Ensure the component properly renders the related item's display template.