From 8e5478df2d5ab77cb1652532b7f61445ad416c8d Mon Sep 17 00:00:00 2001
From: edalzell <erin@silentz.co>
Date: Tue, 20 Oct 2026 20:41:14 -0700
Subject: [PATCH] Make dropdowns inside Bard non-modal

---
 .../js/components/ui/Dropdown/Dropdown.vue    |  8 ++++--
 .../js/tests/components/ui/Dropdown.test.js   | 28 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/tests/components/ui/Dropdown.test.js

diff --git a/resources/js/components/ui/Dropdown/Dropdown.vue b/resources/js/components/ui/Dropdown/Dropdown.vue
index ef0501854a0..88b21bf0816 100644
--- a/resources/js/components/ui/Dropdown/Dropdown.vue
+++ b/resources/js/components/ui/Dropdown/Dropdown.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { useAttrs } from 'vue';
+import { inject, useAttrs } from 'vue';
 import { cva } from 'cva';
 import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui';
 import Button from '../Button/Button.vue';
@@ -10,6 +10,10 @@ defineOptions({
 
 const attrs = useAttrs();
 
+// Modal menus mark everything else aria-hidden, including the editor's other nodes, which makes
+// ProseMirror re-parse them and recreate the set the dropdown lives in.
+const modal = !inject('isInBardField', false);
+
 const emit = defineEmits(['closed']);
 
 const props = defineProps({
@@ -37,7 +41,7 @@ const dropdownContentClasses = cva({
 </script>
 
 <template>
-    <DropdownMenuRoot @update:open="onOpenChange">
+    <DropdownMenuRoot :modal @update:open="onOpenChange">
         <DropdownMenuTrigger as-child data-ui-dropdown-trigger>
             <slot name="trigger">
                 <Button icon="dots" variant="ghost" size="sm" v-bind="attrs" :aria-label="__('Open dropdown menu')" />
diff --git a/resources/js/tests/components/ui/Dropdown.test.js b/resources/js/tests/components/ui/Dropdown.test.js
new file mode 100644
index 00000000000..bca0ee6e827
--- /dev/null
+++ b/resources/js/tests/components/ui/Dropdown.test.js
@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import Dropdown from '@/components/ui/Dropdown/Dropdown.vue';
+
+window.__ = (key) => key;
+
+function mountDropdown(provide = {}) {
+    return mount(Dropdown, {
+        global: {
+            provide,
+            stubs: {
+                DropdownMenuRoot: { props: ['modal'], template: '<div :data-modal="String(modal ?? \'default\')"><slot /></div>' },
+                DropdownMenuTrigger: true,
+                DropdownMenuPortal: true,
+            },
+        },
+    });
+}
+
+test('dropdowns are modal', () => {
+    expect(mountDropdown().find('[data-modal]').attributes('data-modal')).toBe('true');
+});
+
+// Modal menus mark everything else aria-hidden, including the editor's other nodes, which makes
+// ProseMirror re-parse them and recreate the set the dropdown lives in.
+test('dropdowns inside a bard field are not modal', () => {
+    expect(mountDropdown({ isInBardField: true }).find('[data-modal]').attributes('data-modal')).toBe('false');
+});