Skip to content

Drag and drop with Grid field creates bogus content #14920

Closed
#15049
Closed
Drag and drop with Grid field creates bogus content#14920
#15049
Labels
fieldtypes

Description

@leewillis77
leewillis77
opened on Jul 2, 2026

Bug description

When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).

Screen recording of the issue in action (it's difficult to explain clearly!):
https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb

Notes:
00:00 to 00:07 - drag and drop working correctly
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table

How to reproduce

The fieldset used in the demo above is attached.

service_feature_list.yaml

Logs

Environment
EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
Installation
Fresh statamic/statamic site via CLI
Additional details
No response
Metadata
Metadata
Assignees
No one assigned
    Labels
    fieldtypes
    Type
    No type
    Projects
    No projects
    Milestone
    No milestone
    Relationships
    None yet
    Development
    No branches or pull requests
    Issue actions
    
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Add copy buttons to all 
     blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Drag and drop with Grid field creates bogus content · Issue #14920 · statamic/cms · GitHub
    Skip to content
    Drag and drop with Grid field creates bogus content #14920
    Closed
    #15049
    Closed
    Drag and drop with Grid field creates bogus content#14920
    #15049
    Labels
    fieldtypes
    Description
    @leewillis77
    leewillis77
    opened on Jul 2, 2026
    Bug description
    When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).
    Screen recording of the issue in action (it's difficult to explain clearly!):
    https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb
    Notes:
    
00:00 to 00:07 - drag and drop working correctly
    
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
    
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table
    How to reproduce
    The fieldset used in the demo above is attached.
    service_feature_list.yaml
    Logs
    Environment
    EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
    Installation
    Fresh statamic/statamic site via CLI
    Additional details
    No response
    Metadata
    Metadata
    Assignees
    No one assigned
      Labels
      fieldtypes
      Type
      No type
      Projects
      No projects
      Milestone
      No milestone
      Relationships
      None yet
      Development
      No branches or pull requests
      Issue actions
      
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Drag and drop with Grid field creates bogus content · Issue #14920 · statamic/cms · GitHub
      Skip to content
      Drag and drop with Grid field creates bogus content #14920
      Closed
      #15049
      Closed
      Drag and drop with Grid field creates bogus content#14920
      #15049
      Labels
      fieldtypes
      Description
      @leewillis77
      leewillis77
      opened on Jul 2, 2026
      Bug description
      When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).
      Screen recording of the issue in action (it's difficult to explain clearly!):
      https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb
      Notes:
      
00:00 to 00:07 - drag and drop working correctly
      
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
      
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table
      How to reproduce
      The fieldset used in the demo above is attached.
      service_feature_list.yaml
      Logs
      Environment
      EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
      Installation
      Fresh statamic/statamic site via CLI
      Additional details
      No response
      Metadata
      Metadata
      Assignees
      No one assigned
        Labels
        fieldtypes
        Type
        No type
        Projects
        No projects
        Milestone
        No milestone
        Relationships
        None yet
        Development
        No branches or pull requests
        Issue actions
        
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Drag and drop with Grid field creates bogus content · Issue #14920 · statamic/cms · GitHub
        Skip to content
        Drag and drop with Grid field creates bogus content #14920
        Closed
        #15049
        Closed
        Drag and drop with Grid field creates bogus content#14920
        #15049
        Labels
        fieldtypes
        Description
        @leewillis77
        leewillis77
        opened on Jul 2, 2026
        Bug description
        When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).
        Screen recording of the issue in action (it's difficult to explain clearly!):
        https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb
        Notes:
        
00:00 to 00:07 - drag and drop working correctly
        
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
        
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table
        How to reproduce
        The fieldset used in the demo above is attached.
        service_feature_list.yaml
        Logs
        Environment
        EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
        Installation
        Fresh statamic/statamic site via CLI
        Additional details
        No response
        Metadata
        Metadata
        Assignees
        No one assigned
          Labels
          fieldtypes
          Type
          No type
          Projects
          No projects
          Milestone
          No milestone
          Relationships
          None yet
          Development
          No branches or pull requests
          Issue actions
          
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Drag and drop with Grid field creates bogus content · Issue #14920 · statamic/cms · GitHub
          Skip to content
          Drag and drop with Grid field creates bogus content #14920
          Closed
          #15049
          Closed
          Drag and drop with Grid field creates bogus content#14920
          #15049
          Labels
          fieldtypes
          Description
          @leewillis77
          leewillis77
          opened on Jul 2, 2026
          Bug description
          When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).
          Screen recording of the issue in action (it's difficult to explain clearly!):
          https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb
          Notes:
          
00:00 to 00:07 - drag and drop working correctly
          
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
          
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table
          How to reproduce
          The fieldset used in the demo above is attached.
          service_feature_list.yaml
          Logs
          Environment
          EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
          Installation
          Fresh statamic/statamic site via CLI
          Additional details
          No response
          Metadata
          Metadata
          Assignees
          No one assigned
            Labels
            fieldtypes
            Type
            No type
            Projects
            No projects
            Milestone
            No milestone
            Relationships
            None yet
            Development
            No branches or pull requests
            Issue actions
            
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Drag and drop with Grid field creates bogus content · Issue #14920 · statamic/cms · GitHub
            Skip to content
            Drag and drop with Grid field creates bogus content #14920
            Closed
            #15049
            Closed
            Drag and drop with Grid field creates bogus content#14920
            #15049
            Labels
            fieldtypes
            Description
            @leewillis77
            leewillis77
            opened on Jul 2, 2026
            Bug description
            When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).
            Screen recording of the issue in action (it's difficult to explain clearly!):
            https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb
            Notes:
            
00:00 to 00:07 - drag and drop working correctly
            
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
            
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table
            How to reproduce
            The fieldset used in the demo above is attached.
            service_feature_list.yaml
            Logs
            Environment
            EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
            Installation
            Fresh statamic/statamic site via CLI
            Additional details
            No response
            Metadata
            Metadata
            Assignees
            No one assigned
              Labels
              fieldtypes
              Type
              No type
              Projects
              No projects
              Milestone
              No milestone
              Relationships
              None yet
              Development
              No branches or pull requests
              Issue actions
              
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
Drag and drop with Grid field creates bogus content · Issue #14920 · statamic/cms · GitHub
              Skip to content
              Drag and drop with Grid field creates bogus content #14920
              Closed
              #15049
              Closed
              Drag and drop with Grid field creates bogus content#14920
              #15049
              Labels
              fieldtypes
              Description
              @leewillis77
              leewillis77
              opened on Jul 2, 2026
              Bug description
              When re-ordering elements in a Grid field, if you happen to focus the whole fieldset (by clicking and then try and drag a row you end up with a copy of the content (but not the field) dragged into your content as a table. This is confusing for the user and occasionally seems to break any subsequent re-ordering of fields (the fields look like they've reordered but the order is not persisted on save).
              Screen recording of the issue in action (it's difficult to explain clearly!):
              https://github.com/user-attachments/assets/ea580825-6ac7-44f4-ac6b-7fb2904e29cb
              Notes:
              
00:00 to 00:07 - drag and drop working correctly
              
00:08 - user clicks on the fieldset area notice how the fieldset acquires a blue border. In this screenshot this is a little contrived, but when working with longer fieldsets on small screens it's easy to do this when scrolling and navigating around
              
00:10 to 00:12 - user attempts to drag to reorder an item, instead the whole fieldset is dragged and a copy of the content is dumped into the entity as a table
              How to reproduce
              The fieldset used in the demo above is attached.
              service_feature_list.yaml
              Logs
              Environment
              EnvironmentLaravel Version: 12.62.0PHP Version: 8.3.31Composer Version: 2.10.0Environment: localDebug Mode: ENABLEDMaintenance Mode: OFFTimezone: UTCLocale: enCacheConfig: NOT CACHEDEvents: NOT CACHEDRoutes: NOT CACHEDViews: CACHEDDriversBroadcasting: logCache: fileDatabase: sqliteLogs: stack / singleMail: smtpQueue: syncSession: fileStoragepublic/storage: NOT LINKEDStatamicAddons: 0License Key: Not setSites: 1Stache Watcher: Enabled (auto)Static Caching: DisabledVersion: 6.24.0 Solo
              Installation
              Fresh statamic/statamic site via CLI
              Additional details
              No response
              Metadata
              Metadata
              Assignees
              No one assigned
                Labels
                fieldtypes
                Type
                No type
                Projects
                No projects
                Milestone
                No milestone
                Relationships
                None yet
                Development
                No branches or pull requests
                Issue actions