[6.x] Fix nested Bard toolbar focus issues (#14396)

Author: jaygeorge

resources/js/components/fieldtypes/bard/BardButtonsSettingFieldtype.vue

@@ -6,6 +6,7 @@
                 :key="button.name"
                 v-tooltip="button.text"
                 :class="{ active: enabled(button.name) }"
+                @mousedown.prevent
                 @click="toggleButton(button.name)"
             >
                 <ui-icon :name="button.svg" v-if="button.svg" />

resources/js/components/fieldtypes/bard/Image.vue

@@ -14,12 +14,12 @@
             <div
                 class="flex flex-wrap items-center justify-center gap-2 border-t px-2 py-2 text-center text-2xs text-white @container/toolbar dark:border-gray-900 dark:text-gray-300"
             >
-                <Button v-if="!src" size="sm" icon="folder-photos" :text="__('Choose Image')" @click="openSelector" />
+                <Button v-if="!src" size="sm" icon="folder-photos" :text="__('Choose Image')" @mousedown.prevent @click="openSelector" />
 
-                <Button v-if="src" size="sm" icon="edit" :text="__('Edit Image')" @click="edit" />
-                <Button v-if="src" size="sm" icon="rename" :text="__('Override Alt')" :class="{ active: showingAltEdit }" @click="toggleAltEditor" />
-                <Button v-if="src" size="sm" icon="replace" :text="__('Replace')" @click="openSelector" />
-                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" @click="deleteNode" />
+                <Button v-if="src" size="sm" icon="edit" :text="__('Edit Image')" @mousedown.prevent @click="edit" />
+                <Button v-if="src" size="sm" icon="rename" :text="__('Override Alt')" :class="{ active: showingAltEdit }" @mousedown.prevent @click="toggleAltEditor" />
+                <Button v-if="src" size="sm" icon="replace" :text="__('Replace')" @mousedown.prevent @click="openSelector" />
+                <Button v-if="src" size="sm" icon="trash" :text="__('Remove')" @mousedown.prevent @click="deleteNode" />
             </div>
 
             <div

resources/js/components/fieldtypes/bard/LinkToolbarButton.vue

@@ -14,6 +14,7 @@
                 size="sm"
                 :aria-label="button.text"
                 v-tooltip="button.text"
+                @mousedown.prevent
             >
                 <ui-icon :name="button.svg" v-if="button.svg" class="size-4" />
                 <div class="flex items-center" v-html="button.html" v-if="button.html" />

resources/js/components/fieldtypes/bard/Set.vue

@@ -51,7 +51,7 @@
 
                     <Dropdown>
                         <template #trigger>
-                            <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" />
+                            <Button icon="dots" variant="ghost" size="xs" :aria-label="__('Open dropdown menu')" @mousedown.prevent />
                         </template>
                         <DropdownMenu>
                             <DropdownItem

resources/js/components/fieldtypes/bard/ToolbarButton.vue

@@ -6,6 +6,7 @@
         size="sm"
         :aria-label="button.text"
         v-tooltip="button.text"
+        @mousedown.prevent
         @click="button.command(editor, button.args)"
     >
         <ui-icon :name="button.svg" v-if="button.svg" class="size-3.5! " :class="{ 'group-hover:text-white text-yellow-300!': active && variant === 'floating' }" />