Experimental M2A fixes

[bryantgillespie]

Added

• Empty state for no results

Fixed

• #243 shows wrong collections in nested M2A fields
• Keyboard navigation support bug where left / right skip buttons and open wrong collections.
• Cleaner code by using rovingfocus from reka-ui

[Copilot]

Pull Request Overview

This PR refactors the experimental M2A (Many-to-Any) interface to fix keyboard navigation issues and improve the popup handling reliability. The main changes replace the custom VueUse-based keyboard navigation with a more robust RovingFocusGroup implementation from reka-ui and enhance the popup detection mechanism.

Key changes:

• Replaced VueUse keyboard navigation system with RovingFocusGroup from reka-ui
• Improved popup detection and handling with instance-based tracking
• Added empty state display when search returns no results

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
interface.vue	Main component refactor replacing keyboard navigation system and improving popup handling
package.json	Added reka-ui dependency and version bump to 1.3.0
CHANGELOG.md	Documentation of new features and fixes

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[bryantgillespie]

@joggienl do you mind to test this one out and to confirm that it solves your issue in #243 ??

[joggienl]

@joggienl do you mind to test this one out and to confirm that it solves your issue in #243 ??

I am going to try it out, thanks @bryantgillespie !

[joggienl]

@bryantgillespie, it seems to work! There is this short glitch (don't know if that gets worse if there is actually more data in Directus) if you open the drawer.

As for the steps: I did a checkout of this branch and I ran the build step of the experimental-m2a-interface. I then went into the folder package/experimental-m2a-interface and booted a fresh directus instance:

docker run --rm -it -v $PWD:/directus/extensions/experimental-m2a-interface directus/directus:11.12.0

In there, I configured the collections as I described in #243.

Result:

CleanShot.2025-09-22.at.21.36.57.mp4

[bryantgillespie]

@bryantgillespie, it seems to work! There is this short glitch (don't know if that gets worse if there is actually more data in Directus) if you open the drawer.

By glitch are you talking about the flash of content here where it briefly shows the original button?

[joggienl]

yes, I suppose thats it!

*edit:

Actually, its the combination of the button disappearing and the new buttons to chime in. Perhaps there's a way to animate that a bit more smooth?

You can clearly see it if you lower the playback speed (by at least 50%)

[bryantgillespie]

Actually, its the combination of the button disappearing and the new buttons to chime in. Perhaps there's a way to animate that a bit more smooth?

This behavior was already there, so I'm inclined to ship this and come back and revisit. Honestly, I would love to see if this sort of interface be moved to core for the M2A builder scenario.

[joggienl]

Actually, its the combination of the button disappearing and the new buttons to chime in. Perhaps there's a way to animate that a bit more smooth?

This behavior was already there, so I'm inclined to ship this and come back and revisit. Honestly, I would love to see if this sort of interface be moved to core for the M2A builder scenario.

I agree, would be neat if this could become part of the core. As a side question though which I haven't checked, isn't it possible to register an interface directly for the m2a field? That would obviously make things even easier.

As for now, personally I would agree to just ship it (perhaps do revisit my comment on the dependency part 😊). The flashy-ness was just an observation, and if it helps: it is visible for the nested m2a fields situation, I have not really noticed it if its not nested (=not in a drawer).

[bryantgillespie]

You can create custom interfaces for the M2A field. Here's an interesting one from the community as well. The challenging bit is that we don't expose a lot of the composables and helpers that power those interfaces inside core through the extensions SDK right now. So you essentially have to duplicate the logic. Which then does bring some licensing questions into play. Tricky bit 😆

[joggienl]

You can create custom interfaces for the M2A field. Here's an interesting one from the community as well. The challenging bit is that we don't expose a lot of the composables and helpers that power those interfaces inside core through the extensions SDK right now. So you essentially have to duplicate the logic. Which then does bring some licensing questions into play. Tricky bit 😆

Thanks for that community extension, looks cool.

And yes, I looked a bit into it. You basically have to rebuild the current m2a builder (list to show current items, sorting, creating, selecting etc etc).

Perhaps a silly question but what do you mean with licensing questions?