Support inline editing of relational fields via side drawer (M2O, O2M, M2M, M2A)

[smartlabsAT]

Summary

Relational fields are currently display-only in the Super Table layout. In edit mode, scalar fields (string, select, boolean, date, …) become editable inline, but Many-to-One, One-to-Many, Many-to-Many, Many-to-Any and file relations cannot be edited from the table — you have to open the item detail view. This issue tracks adding inline editing for relational fields.

UI decision (settled): editing happens in a side drawer, not a popover.
A popover that fits inside a table cell is too small a surface for relational editing (search over the related collection, add / remove / sort junction rows, etc.). The drawer slides in from the right and hosts the full native Directus relational interface.

Current behavior

• With edit mode enabled, code / status-style scalar fields are editable inline.
• Relational columns (M2O, O2M, M2M, M2A, files) render their values but stay read-only — 0 editable cells even in edit mode.
• This is enforced by design in three places:
  • src/constants/supportedFields.ts — all relational interfaces are false (many-to-one, one-to-many, many-to-many, many-to-any, list-m2m, list-o2m, list-m2a) and type alias is false.
  • src/components/EditableCellRelational.vue — isRelational fields are routed to the display-only <div class="editable-cell relational"> branch and never mount an editor.
  • Verified live: in edit mode, scalar columns are editable while relational columns are not.

Tag fields: why two behave differently

Directus has two tag-like field types that look similar but are technically very different — a frequent point of confusion ("we have a tag editor, why aren't tags editable?"):

	tags (CSV interface)	real_tags (M2M relation)
Type	csv	alias
Storage	"new,sale" string	junction table with FKs
Inline edit today	✓ via TagCell + InlineEditPopover	✗ read-only branch
Use case	quick labels	relations to a real collection with rich props

CSV tags are already inline-editable. M2M tags are the relational case this issue addresses.

Desired behavior

Allow editing relational values directly from the table cell via a side drawer:

• M2O — select / replace the related item.
• M2M — add / remove / sort related items (manage junction rows).
• O2M — add / remove / reassign children.
• Files — add / remove / sort file relations.
• M2A — pick target collection + item (polymorphic), add / remove junction rows. (Most complex case; may land in a later phase.)

Proposed implementation

• New component RelationalEditorDrawer.vue that wraps the matching native Directus interface (interface-list-m2m, interface-list-o2m, interface-files, and later the M2A variant) inside a v-drawer.
• EditableCellRelational.vue — when in edit mode and the field is relational, a click on the cell opens the drawer instead of navigating to the row detail.
• Save / cancel in the drawer commit via tableApi.update. Optimistic UI update + refetch on success, revert on error.
• Reuse native Directus relational interfaces rather than building a custom picker.

Permissions & scope

• Respect permissions: only allow editing when the user has update on the parent (and create / update / delete on the junction / related collection as needed). Read-but-no-write must stay read-only (already handled for scalar fields).
• Keep the current read-only rendering as the fallback when editing is disabled or not permitted.
• Out of scope (first iteration): translation rows (own render path), bulk edit across multiple rows, touch / mobile-specific UX. M2A may be delivered as a follow-up phase after M2O / M2M / O2M / files.

Acceptance criteria

• Relational fields open a side drawer for editing in edit mode, gated by permissions.
• Junction-based relations (M2M, files, later M2A) correctly create / remove / sort junction rows.
• Save commits via the table API with an optimistic update + refetch on success; errors roll back.
• No regression to the read-only display of relational fields when editing is disabled or not permitted.
• Unit / E2E tests: open the drawer, add and remove items, save, verify the table re-renders; plus editability / permission gating.

History

• Split from the M2A display support work (M2A relationship is not displayed correctly #60).
• Consolidates Inline editing for M2M / O2M / files columns (drawer) #51 (drawer-based M2M / O2M / files editing), which surfaced during Configuring the layout for displaying related fields #48 (per-column display configuration). The side-drawer UI decision is settled here.