From c5dcd5159bc2126462f43864f84bb6f475504df2 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 22 Jul 2026 09:41:12 +0100
Subject: [PATCH] prevent native drag of a node-selected set from inside the
 set

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../js/components/fieldtypes/bard/Set.vue     | 14 +++
 .../components/fieldtypes/bard/Set.test.js    | 92 +++++++++++++++++++
 2 files changed, 106 insertions(+)
 create mode 100644 resources/js/tests/components/fieldtypes/bard/Set.test.js

diff --git a/resources/js/components/fieldtypes/bard/Set.vue b/resources/js/components/fieldtypes/bard/Set.vue
index b582c4eefca..1c99d83d775 100644
--- a/resources/js/components/fieldtypes/bard/Set.vue
+++ b/resources/js/components/fieldtypes/bard/Set.vue
@@ -16,6 +16,7 @@
             @copy.stop
             @paste.stop
             @cut.stop
+            @dragstart="preventNodeSelectionDrag"
         >
             <div ref="content" hidden />
             <header
@@ -351,6 +352,19 @@ export default {
             this.$el.setAttribute('draggable', false);
             this._draggableObserver?.observe(this.$el, { attributes: true, attributeFilter: ['draggable'] });
         },
+
+        preventNodeSelectionDrag(event) {
+            // When the set is node-selected, an invisible DOM selection spans the whole set.
+            // Dragging from anywhere inside it (e.g. a grid row's drag handle) would natively
+            // drag that selection and dump a serialized copy of the set into the editor.
+            const target = event.target instanceof Element ? event.target : event.target.parentElement;
+            if (target?.closest('[draggable="true"]')) return;
+
+            const selection = window.getSelection();
+            if (selection?.rangeCount && selection.containsNode(this.$el, false)) {
+                event.preventDefault();
+            }
+        },
     },
 
     mounted() {
diff --git a/resources/js/tests/components/fieldtypes/bard/Set.test.js b/resources/js/tests/components/fieldtypes/bard/Set.test.js
new file mode 100644
index 00000000000..4ae7d1bbfcb
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/bard/Set.test.js
@@ -0,0 +1,92 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, expect, test, vi } from 'vitest';
+import * as Globals from '@/bootstrap/globals';
+import Set from '@/components/fieldtypes/bard/Set.vue';
+import { containerContextKey } from '@/components/ui/Publish/Container.vue';
+
+Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
+window.Statamic = { $fieldActions: { get: () => [] } };
+
+function mountSet() {
+    return mount(Set, {
+        shallow: true,
+        props: {
+            editor: {},
+            node: { attrs: { id: 'set-1', enabled: true, values: { type: 'my_set' } } },
+            decorations: [],
+            selected: false,
+            extension: {
+                options: {
+                    bard: {
+                        meta: { existing: {} },
+                        collapsed: [],
+                        setIndexes: { 'set-1': 0 },
+                        config: { previews: false },
+                        name: 'content',
+                        handle: 'content',
+                        fieldPathPrefix: null,
+                        metaPathPrefix: null,
+                        setHasError: () => false,
+                    },
+                },
+            },
+            getPos: () => 0,
+            updateAttributes: vi.fn(),
+            deleteNode: vi.fn(),
+        },
+        global: {
+            stubs: { NodeViewWrapper: { template: '<div><slot /></div>' } },
+            provide: {
+                bard: { setConfigs: [{ handle: 'my_set', fields: [] }], isReadOnly: false, hasBeenFocused: false },
+                bardSets: [],
+                [containerContextKey]: {
+                    values: { value: {} },
+                    previews: { value: {} },
+                    setFieldValue: vi.fn(),
+                    setFieldMeta: vi.fn(),
+                },
+            },
+        },
+    });
+}
+
+function mockSelection({ containsSet }) {
+    vi.spyOn(window, 'getSelection').mockReturnValue({
+        rangeCount: 1,
+        containsNode: () => containsSet,
+    });
+}
+
+afterEach(() => vi.restoreAllMocks());
+
+test('dragging from inside the set is prevented while the selection covers the whole set', async () => {
+    const wrapper = mountSet();
+    mockSelection({ containsSet: true });
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    wrapper.find('header').element.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+});
+
+test('dragging from inside the set is allowed when the selection does not cover the whole set', async () => {
+    const wrapper = mountSet();
+    mockSelection({ containsSet: false });
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    wrapper.find('header').element.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+});
+
+test('dragging a draggable element inside the set is allowed', async () => {
+    const wrapper = mountSet();
+    mockSelection({ containsSet: true });
+
+    const header = wrapper.find('header').element;
+    header.setAttribute('draggable', 'true');
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    header.dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+});