Skip to content

Broken reordering/draggable functionality in List field type #5437

Closed
Closed
Broken reordering/draggable functionality in List field type#5437
Labels
ui

Description

@caseydwyer
caseydwyer
opened on Mar 8, 2022

Bug description

I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:

It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.

The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:

list-bug

So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.

How to reproduce

  1. Add a List field type to a blueprint.
  2. Create a new entry.
  3. Add three items to the List
  4. Try to drag/reorder the three items

Logs

No response

Versions

Statamic 3.2.37 Pro
Laravel 8.83.4
PHP 7.4.3

Installation

Fresh statamic/statamic site via CLI

Additional details

If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!

Metadata

Metadata

Assignees

No one assigned

    Labels

    ui

    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" + '
Broken reordering/draggable functionality in List field type · Issue #5437 · statamic/cms · GitHub
    Skip to content
    Broken reordering/draggable functionality in List field type #5437
    Closed
    Closed
    Broken reordering/draggable functionality in List field type#5437
    Labels
    ui
    Description
    @caseydwyer
    caseydwyer
    opened on Mar 8, 2022
    Bug description
    I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:
    It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.
    The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:
    list-bug
    So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.
    How to reproduce
    1. Add a List field type to a blueprint.
    2. Create a new entry.
    3. Add three items to the List
    4. Try to drag/reorder the three items
    Logs
    No response
    Versions
    Statamic 3.2.37 Pro
    
Laravel 8.83.4
    
PHP 7.4.3
    Installation
    Fresh statamic/statamic site via CLI
    Additional details
    If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!
    Metadata
    Metadata
    Assignees
    No one assigned
      Labels
      ui
      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('^' + ".*" + '
Broken reordering/draggable functionality in List field type · Issue #5437 · statamic/cms · GitHub
      Skip to content
      Broken reordering/draggable functionality in List field type #5437
      Closed
      Closed
      Broken reordering/draggable functionality in List field type#5437
      Labels
      ui
      Description
      @caseydwyer
      caseydwyer
      opened on Mar 8, 2022
      Bug description
      I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:
      It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.
      The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:
      list-bug
      So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.
      How to reproduce
      1. Add a List field type to a blueprint.
      2. Create a new entry.
      3. Add three items to the List
      4. Try to drag/reorder the three items
      Logs
      No response
      Versions
      Statamic 3.2.37 Pro
      
Laravel 8.83.4
      
PHP 7.4.3
      Installation
      Fresh statamic/statamic site via CLI
      Additional details
      If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!
      Metadata
      Metadata
      Assignees
      No one assigned
        Labels
        ui
        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('^' + ".*" + '
Broken reordering/draggable functionality in List field type · Issue #5437 · statamic/cms · GitHub
        Skip to content
        Broken reordering/draggable functionality in List field type #5437
        Closed
        Closed
        Broken reordering/draggable functionality in List field type#5437
        Labels
        ui
        Description
        @caseydwyer
        caseydwyer
        opened on Mar 8, 2022
        Bug description
        I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:
        It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.
        The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:
        list-bug
        So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.
        How to reproduce
        1. Add a List field type to a blueprint.
        2. Create a new entry.
        3. Add three items to the List
        4. Try to drag/reorder the three items
        Logs
        No response
        Versions
        Statamic 3.2.37 Pro
        
Laravel 8.83.4
        
PHP 7.4.3
        Installation
        Fresh statamic/statamic site via CLI
        Additional details
        If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!
        Metadata
        Metadata
        Assignees
        No one assigned
          Labels
          ui
          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" + '
Broken reordering/draggable functionality in List field type · Issue #5437 · statamic/cms · GitHub
          Skip to content
          Broken reordering/draggable functionality in List field type #5437
          Closed
          Closed
          Broken reordering/draggable functionality in List field type#5437
          Labels
          ui
          Description
          @caseydwyer
          caseydwyer
          opened on Mar 8, 2022
          Bug description
          I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:
          It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.
          The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:
          list-bug
          So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.
          How to reproduce
          1. Add a List field type to a blueprint.
          2. Create a new entry.
          3. Add three items to the List
          4. Try to drag/reorder the three items
          Logs
          No response
          Versions
          Statamic 3.2.37 Pro
          
Laravel 8.83.4
          
PHP 7.4.3
          Installation
          Fresh statamic/statamic site via CLI
          Additional details
          If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!
          Metadata
          Metadata
          Assignees
          No one assigned
            Labels
            ui
            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('^' + ".*" + '
Broken reordering/draggable functionality in List field type · Issue #5437 · statamic/cms · GitHub
            Skip to content
            Broken reordering/draggable functionality in List field type #5437
            Closed
            Closed
            Broken reordering/draggable functionality in List field type#5437
            Labels
            ui
            Description
            @caseydwyer
            caseydwyer
            opened on Mar 8, 2022
            Bug description
            I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:
            It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.
            The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:
            list-bug
            So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.
            How to reproduce
            1. Add a List field type to a blueprint.
            2. Create a new entry.
            3. Add three items to the List
            4. Try to drag/reorder the three items
            Logs
            No response
            Versions
            Statamic 3.2.37 Pro
            
Laravel 8.83.4
            
PHP 7.4.3
            Installation
            Fresh statamic/statamic site via CLI
            Additional details
            If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!
            Metadata
            Metadata
            Assignees
            No one assigned
              Labels
              ui
              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); }
})();
})();
Broken reordering/draggable functionality in List field type · Issue #5437 · statamic/cms · GitHub
              Skip to content
              Broken reordering/draggable functionality in List field type #5437
              Closed
              Closed
              Broken reordering/draggable functionality in List field type#5437
              Labels
              ui
              Description
              @caseydwyer
              caseydwyer
              opened on Mar 8, 2022
              Bug description
              I think List entries are supposed to be reorderable. Leading with this in case they're not supposed to have that functionality, but from the List field type docs:
              It has full keyboard controls so you can use up to go up, down to go down, drag and drop to rearrange the order, and click an item to select it and begin editing.
              The delete function works well; hovering an li replaces the bullet with an x. But reordering is tricky/buggy. There's a vertical arrow indicating draggability, but it's...hard to find? And even harder to click/drag. Tried to capture this in a GIF:
              list-bug
              So it's doable, but kinda feels like we're just missing a visual "handle" to grab, like we have in a Grid or Replicator.
              How to reproduce
              1. Add a List field type to a blueprint.
              2. Create a new entry.
              3. Add three items to the List
              4. Try to drag/reorder the three items
              Logs
              No response
              Versions
              Statamic 3.2.37 Pro
              
Laravel 8.83.4
              
PHP 7.4.3
              Installation
              Fresh statamic/statamic site via CLI
              Additional details
              If this needs more detail, let me know—hard to explain or capture, but definitely feels like a UI bug. Also happy to take a stab at PR-ing this, but wasn't sure where to start (eg, assumed there was a mixin for that draggability, just didn't know where to find it). Feel free to point me in the right direction, if an initial attempt to fix this would be helpful. 👍 Thanks team!
              Metadata
              Metadata
              Assignees
              No one assigned
                Labels
                ui
                Type
                No type
                Projects
                No projects
                Milestone
                No milestone
                Relationships
                None yet
                Development
                No branches or pull requests
                Issue actions