diff --git a/packages/experimental-m2a-interface/CHANGELOG.md b/packages/experimental-m2a-interface/CHANGELOG.md
index 8ad985c8..720e62a2 100644
--- a/packages/experimental-m2a-interface/CHANGELOG.md
+++ b/packages/experimental-m2a-interface/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## [1.3.0] - 2025-09-22
+
+## Added
+- Empty state for no results
+
+## Fixed
+- [#243](https://github.com/directus-labs/extensions/issues/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
+
 ## [1.2.0] - 2025-04-13
 
 ### Added
diff --git a/packages/experimental-m2a-interface/package.json b/packages/experimental-m2a-interface/package.json
index 82be5ea9..92fb31d2 100644
--- a/packages/experimental-m2a-interface/package.json
+++ b/packages/experimental-m2a-interface/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@directus-labs/experimental-m2a-interface",
 	"type": "module",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"description": "Add a matrix button selector to the built-in M2A interface",
 	"author": "Directus Labs",
 	"contributors": [
@@ -38,7 +38,8 @@
 		"validate": "directus-extension validate"
 	},
 	"dependencies": {
-		"@vueuse/core": "^13.1.0"
+		"@vueuse/core": "^13.1.0",
+		"reka-ui": "^2.5.0"
 	},
 	"devDependencies": {
 		"@directus/extensions-sdk": "13.0.4",
diff --git a/packages/experimental-m2a-interface/src/interface.vue b/packages/experimental-m2a-interface/src/interface.vue
index 84504c8e..a689d43e 100644
--- a/packages/experimental-m2a-interface/src/interface.vue
+++ b/packages/experimental-m2a-interface/src/interface.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { ComponentPublicInstance, Ref } from 'vue';
 import {
-	onKeyStroke,
-	useCycleList,
-	useEventListener,
 	useTemplateRefsList,
 } from '@vueuse/core';
+import { RovingFocusGroup, RovingFocusItem } from 'reka-ui';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
 type MaybeHTML = HTMLElement | null | undefined;
@@ -67,9 +65,10 @@ function removeParentDomElement(el: MaybeHTMLRef) {
 function useButtonMatrix(targetBuilder: MaybeHTMLRef) {
 	const label = ref('');
 	const buttonMatrix = ref<MatrixButton[]>([]);
-	// eslint-disable-next-line unused-imports/no-unused-vars
+
 	let popupId = '';
 	let firstActionButton: MaybeHTML;
+	let clickTimestamp = 0;
 
 	watch(() => targetBuilder.value, setup, { once: true });
 
@@ -83,17 +82,24 @@ function useButtonMatrix(targetBuilder: MaybeHTMLRef) {
 
 		label.value = firstActionButton.textContent ?? '';
 
-		const maxTries = 20;
+		const maxTries = 30;
 		let tryCount = 0;
 		let popup;
 
 		do {
-			await delay(tryCount ? 50 : 0);
+			// Longer delay for first few tries to allow popup creation
+			const delay_ms = tryCount === 0 ? 100 : (tryCount < 5 ? 75 : 50);
+			await delay(delay_ms);
+
 			tryCount++;
 
+			clickTimestamp = Date.now(); // Record when we clicked
 			firstActionButton.click();
 			await nextTick();
 
+			// Additional delay after click for popup to fully render
+			await delay(25);
+
 			popup = findAndHandlePopup();
 		}
 		while (!popup && tryCount < maxTries);
@@ -107,18 +113,36 @@ function useButtonMatrix(targetBuilder: MaybeHTMLRef) {
 	}
 
 	function findAndHandlePopup() {
-		const popup = document.querySelector('#menu-outlet .v-menu-popper.active:not([data-hacked])');
-		if (!popup)
-			return;
+		const instanceId = `btn-matrix-${clickTimestamp}`;
+
+		// Find all active popups that haven't been claimed
+		const popups = document.querySelectorAll('#menu-outlet .v-menu-popper.active:not([data-hacked])');
 
-		(popup as HTMLElement).dataset.hacked = 'hacked';
-		popupId = popup.id;
+		if (popups.length === 0) {
+			return null;
+		}
 
-		return popup as HTMLElement;
+		// Pick the popup that appeared most recently (DOM order)
+		for (let i = popups.length - 1; i >= 0; i--) {
+			const popup = popups[i] as HTMLElement;
+			const m2aItems = popup.querySelectorAll('.v-list-item.link.clickable');
+
+			if (m2aItems.length > 0) {
+				popup.dataset.hacked = instanceId;
+				popup.dataset.instanceId = instanceId;
+				popupId = popup.id;
+				return popup;
+			}
+		}
+
+		return null;
 	}
 
 	function createButtonMatrix(popup: HTMLElement) {
-		popup.querySelectorAll('.v-list-item.link.clickable')?.forEach((button) => {
+		const items = popup.querySelectorAll('.v-list-item.link.clickable');
+		buttonMatrix.value = []; // Clear existing buttons
+
+		items.forEach((button) => {
 			const label = (button as HTMLElement).textContent;
 			const icon = (button.querySelector('.v-icon [data-icon]') as HTMLElement)?.dataset?.icon ?? 'database';
 
@@ -139,17 +163,37 @@ function useButtonMatrix(targetBuilder: MaybeHTMLRef) {
 	}
 
 	async function triggerClick(index: number) {
+		const targetButton = filteredButtonMatrix.value[index];
+		if (!targetButton) return;
+
 		firstActionButton?.click();
 		await nextTick();
 
-		const popup = document.querySelector('.v-menu-popper.active');
-		if (!popup)
-			return;
+		// Find the popup that belongs to this button matrix instance
+		// First try to find by our stored popupId, then fallback to active popup
+		let popup: HTMLElement | null = null;
+
+		if (popupId) {
+			// Escape the ID to handle IDs that start with numbers or contain special characters
+			const escapedId = CSS.escape(popupId);
+			popup = document.querySelector(`#${escapedId}`);
+		}
+
+		if (!popup || !popup.classList.contains('active')) {
+			popup = document.querySelector('.v-menu-popper.active');
+		}
+
+		if (!popup) return;
 
 		const items = popup?.querySelectorAll('.v-list-item.link.clickable');
-		const targetItem = items?.[index] as HTMLElement;
-		if (targetItem)
-			targetItem.click();
+
+		// Find the original index in the full button matrix
+		const originalIndex = buttonMatrix.value.findIndex((button) =>
+			button.label === targetButton.label && button.icon === targetButton.icon,
+		);
+
+		const targetItem = items?.[originalIndex] as HTMLElement;
+		if (targetItem) targetItem.click();
 
 		await nextTick();
 		(popup as HTMLElement).style.visibility = 'hidden';
@@ -161,75 +205,39 @@ function useButtonMatrix(targetBuilder: MaybeHTMLRef) {
 	}
 }
 
-// --- Keyboard Navigation with VueUse ---
-
+// --- Keyboard Navigation with RovingFocusGroup ---
 const gridRef = ref<HTMLElement | null>(null);
-
 const buttonRefs = useTemplateRefsList<ComponentPublicInstance>();
 
-const buttonIndices = computed(() => filteredButtonMatrix.value.map((_, i) => i));
-
-const { state: activeButtonIndex, next: cycleNext, prev: cyclePrev, goTo: goToIndex } = useCycleList(
-	buttonIndices,
-	{ initialValue: 0 },
-);
+function handleTabFromSearch(event: KeyboardEvent) {
+	if (event.shiftKey) {
+		// Don't handle Shift+Tab, let it go to previous element
+		return;
+	}
 
-function focusButton(index: number) {
-	nextTick(() => {
-		const targetComponent = buttonRefs.value[index];
+	// If there are no filtered results, let Tab continue to next focusable element
+	if (filteredButtonMatrix.value.length === 0) {
+		return;
+	}
 
-		if (targetComponent?.$el) {
-			const targetButtonWrapper = targetComponent.$el as HTMLElement;
-			const innerButton = targetButtonWrapper?.querySelector('button');
-			innerButton?.focus();
-		}
-	});
-}
+	// Only prevent default for forward Tab when there are buttons to focus
+	event.preventDefault();
 
-const keyStrokeOptions = { target: gridRef, passive: false };
-
-onKeyStroke(['ArrowDown', 'ArrowRight'], (e) => {
-	e.preventDefault();
-	cycleNext();
-	focusButton(activeButtonIndex.value);
-}, keyStrokeOptions);
-
-onKeyStroke(['ArrowUp', 'ArrowLeft'], (e) => {
-	e.preventDefault();
-	cyclePrev();
-	focusButton(activeButtonIndex.value);
-}, keyStrokeOptions);
-
-onKeyStroke('Home', (e) => {
-	e.preventDefault();
-	goToIndex(0);
-	focusButton(activeButtonIndex.value);
-}, keyStrokeOptions);
-
-onKeyStroke('End', (e) => {
-	e.preventDefault();
-	const lastIndex = buttonIndices.value.length - 1;
-
-	if (lastIndex >= 0) {
-		goToIndex(lastIndex);
-		focusButton(activeButtonIndex.value);
-	}
-}, keyStrokeOptions);
+	if (buttonRefs.value.length > 0) {
+		// Focus the first button directly since RovingFocusGroup doesn't expose focus method
+		nextTick(() => {
+			const firstButton = buttonRefs.value[0];
 
-watch(buttonIndices, (newIndices) => {
-	if (!newIndices.includes(activeButtonIndex.value) && newIndices.length > 0) {
-		goToIndex(0);
-	}
-	else if (newIndices.length === 0) {
-		goToIndex(0);
+			if (firstButton?.$el) {
+				firstButton.$el.focus();
+			}
+		});
 	}
-}, { flush: 'post' });
+}
 
-useEventListener(gridRef, 'focus', (event: FocusEvent) => {
-	if (!gridRef.value?.contains(event.relatedTarget as Node) && buttonIndices.value.length > 0) {
-		focusButton(activeButtonIndex.value);
-	}
-});
+function clearSearch() {
+	searchQuery.value = '';
+}
 </script>
 
 <template>
@@ -254,32 +262,46 @@ useEventListener(gridRef, 'focus', (event: FocusEvent) => {
 				v-model="searchQuery"
 				:placeholder="props.searchPlaceholder"
 				class="search-input"
+				@keydown.tab="handleTabFromSearch"
 			>
 				<template #prepend>
 					<v-icon name="search" />
 				</template>
+				<template #append>
+					<template v-if="searchQuery">
+						<v-icon
+							name="close"
+							class="clear-icon"
+							clickable
+							@click="clearSearch"
+						/>
+					</template>
+				</template>
 			</v-input>
 
-			<div
+			<RovingFocusGroup
+				v-if="filteredButtonMatrix.length > 0"
 				ref="gridRef"
 				class="grid"
-				tabindex="0"
+				orientation="horizontal"
 			>
-				<!-- eslint-disable-next-line vue/valid-v-for -->
-				<v-button
+				<RovingFocusItem
 					v-for="(button, index) in filteredButtonMatrix"
 					:key="button.label"
 					:ref="buttonRefs.set"
-					:tabindex="index === activeButtonIndex ? 0 : -1"
-					secondary
-					full-width
+					as="button"
+					class="roving-button"
 					@click="triggerClick(index)"
-					@keydown.enter.prevent="triggerClick(index)"
-					@keydown.space.prevent="triggerClick(index)"
 				>
 					<v-icon :name="button.icon" />
 					<v-text-overflow :text="button.label" size="small" />
-				</v-button>
+				</RovingFocusItem>
+			</RovingFocusGroup>
+			<div v-else-if="searchQuery" class="no-results">
+				<v-icon name="search_off" class="no-results-icon" />
+				<p class="no-results-text">
+					No items match your search. Try adjusting your search terms.
+				</p>
 			</div>
 		</div>
 	</Teleport>
@@ -331,6 +353,52 @@ useEventListener(gridRef, 'focus', (event: FocusEvent) => {
 	--v-button-height: 100px;
 }
 
+.v-button :deep(button:focus) {
+	outline: 2px solid var(--theme--primary);
+	outline-offset: 2px;
+}
+
+.roving-button {
+	--v-button-color: var(--theme--foreground);
+	--v-button-color-hover: var(--theme--foreground);
+	--v-button-background-color: var(--theme--background-normal);
+	--v-button-background-color-hover: var(--theme--background-accent);
+	--v-icon-color: var(--theme--foreground-subdued);
+
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+	width: 100%;
+	height: 100px;
+	padding: 12px;
+
+	color: var(--v-button-color);
+	font-weight: 600;
+	font-size: 16px;
+	line-height: 22px;
+	text-decoration: none;
+	background-color: var(--v-button-background-color);
+	border: var(--theme--border-width) solid var(--v-button-background-color);
+	border-radius: var(--theme--border-radius);
+	cursor: pointer;
+	transition: var(--fast) var(--transition);
+	transition-property: background-color, border, color;
+}
+
+.roving-button:hover {
+	color: var(--v-button-color-hover);
+	background-color: var(--v-button-background-color-hover);
+	border-color: var(--v-button-background-color-hover);
+}
+
+.roving-button:focus {
+	outline: 2px solid var(--theme--primary);
+	outline-offset: 2px;
+}
+
 .v-text-overflow {
 	width: 100%;
 }
@@ -342,4 +410,29 @@ useEventListener(gridRef, 'focus', (event: FocusEvent) => {
 .search-input {
 	margin-bottom: 12px;
 }
+
+.no-results {
+	background-color: var(--theme--background-subdued);
+	border-radius: var(--theme--border-radius);
+	grid-column: 1 / -1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+	text-align: center;
+	color: var(--theme--foreground-subdued);
+}
+
+.no-results-icon {
+	--v-icon-color: var(--theme--foreground-subdued);
+	margin-bottom: 12px;
+	font-size: 48px;
+}
+
+.no-results-text {
+	margin: 0;
+	font-weight: 500;
+	color: var(--theme--foreground);
+}
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f4440dd6..b511e4e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -395,7 +395,7 @@ importers:
         version: 13.1.1(knex@3.1.0)(vue@3.5.13(typescript@5.8.3))
       '@directus/utils':
         specifier: ^13.0.5
-        version: 13.0.5(vue@3.5.13(typescript@5.8.3))
+        version: 13.0.6(vue@3.5.13(typescript@5.8.3))
       '@vueuse/core':
         specifier: ^13.1.0
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
@@ -546,6 +546,9 @@ importers:
       '@vueuse/core':
         specifier: ^13.1.0
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
+      reka-ui:
+        specifier: ^2.5.0
+        version: 2.5.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
     devDependencies:
       '@directus/extensions-sdk':
         specifier: 13.0.4
@@ -6992,6 +6995,10 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
   pinia@3.0.2:
     resolution: {integrity: sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==}
     peerDependencies:
@@ -7337,6 +7344,11 @@ packages:
     peerDependencies:
       vue: '>= 3.2.0'
 
+  reka-ui@2.5.0:
+    resolution: {integrity: sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
@@ -7921,8 +7933,8 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  unplugin-utils@0.2.4:
-    resolution: {integrity: sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==}
+  unplugin-utils@0.2.5:
+    resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
     engines: {node: '>=18.12.0'}
 
   unrs-resolver@1.7.2:
@@ -16899,6 +16911,8 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  picomatch@4.0.3: {}
+
   pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       '@vue/devtools-api': 7.7.6
@@ -17259,6 +17273,23 @@ snapshots:
       - '@vue/composition-api'
       - typescript
 
+  reka-ui@2.5.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      '@floating-ui/dom': 1.7.0
+      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.8.3))
+      '@internationalized/date': 3.8.0
+      '@internationalized/number': 3.6.1
+      '@tanstack/vue-virtual': 3.13.8(vue@3.5.13(typescript@5.8.3))
+      '@vueuse/core': 12.8.2(typescript@5.8.3)
+      '@vueuse/shared': 12.8.2(typescript@5.8.3)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.13(typescript@5.8.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   requires-port@1.0.0:
     optional: true
 
@@ -17346,7 +17377,7 @@ snapshots:
       esbuild: 0.25.0
       get-tsconfig: 4.10.0
       rollup: 3.29.5
-      unplugin-utils: 0.2.4
+      unplugin-utils: 0.2.5
     transitivePeerDependencies:
       - supports-color
 
@@ -17922,10 +17953,10 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-utils@0.2.4:
+  unplugin-utils@0.2.5:
     dependencies:
       pathe: 2.0.3
-      picomatch: 4.0.2
+      picomatch: 4.0.3
 
   unrs-resolver@1.7.2:
     dependencies: