Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-63625

Remaining issues with drag and drop sortable table or list

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: 3.6
    • Fix Version/s: 3.6
    • Component/s: JavaScript, Themes, Usability
    • Labels:
    • Testing Instructions:
      Hide

      (basically replay testing instructions from MDL-51803, paying special attention to the cases / OSs that caused the creation of this issue):

      take the test file from
      https://raw.githubusercontent.com/marinaglancy/moodle/MDL-51803-master-test/testsort.php
      and copy to your wwwroot

      Play around with the sortable lists, modify test file and try to change some parameters.
      Test on mobile device using touch dragging. Use different browsers. For mobile use some modern browser and an old ones (for example Samsung internet on Galaxy S5). Test on iOS very thorough

      Whenever the handle is present (crossarrow icon) try clicking on it and make sure you can use the move dialogue. This dialogue should be accessible with keyboard as well.

      Show
      (basically replay testing instructions from MDL-51803 , paying special attention to the cases / OSs that caused the creation of this issue): take the test file from https://raw.githubusercontent.com/marinaglancy/moodle/MDL-51803-master-test/testsort.php and copy to your wwwroot Play around with the sortable lists, modify test file and try to change some parameters. Test on mobile device using touch dragging. Use different browsers. For mobile use some modern browser and an old ones (for example Samsung internet on Galaxy S5). Test on iOS very thorough Whenever the handle is present (crossarrow icon) try clicking on it and make sure you can use the move dialogue. This dialogue should be accessible with keyboard as well.
    • Affected Branches:
      MOODLE_36_STABLE
    • Fixed Branches:
      MOODLE_36_STABLE
    • Pull Master Branch:
      MDL-63625-master

      Description

      This is a followup of MDL-51803, where some problems were detected in the testing phase. Borrowed from there:

      Michael Hawkins added a comment -

      PC Testing

      Setup:  Ubuntu using both Firefox and Chrome

      This mostly all worked fine for desktop, both with mouse and keyboard, I just found an issue with example 7:

      Example 7 - embedded lists: The way the JS works, means that if you click on the move handle of the child items (that fall within "sort activities", sort-example7b), it also triggers the code for "sort section", sort-example7a, which is the parent. The result is that two modals are loaded, one to move the item you've clicked, and another to move the whole section it resides within (which you will see once closing/choosing on the first modal).

      While this might just be a bug in the way the test script is written, my main concern is that this could demonstrate a potential implementation issue if certain draggable sections reside within other draggable sections when used in production, having unintended side effects of triggering more move requests than intended, from some other JS block elsewhere in the code.

      Mobile

      Android:
      No consistent issues specific to the latest Android, using Chrome.

      iOS:

      Tested with the same results on both Safari and Chrome on the following setups:
      iPhone 6 on IOS 11.2.5
      iPhone 8 on IOS 12

      1. All lists using the move handle, apart from the first one (vertical list): After selecting move, and choosing an option, the modal is not closed. After manually closing using cancel or the cross icon, the move handles for the whole page no longer work, requiring a page refresh.
      2. Dragging is difficult and not intuitive to use in iOS, for two reasons:
      • If you simply touch over the move handle and drag, it will scroll the page. It will only work after long press, which causes the cursor to highlight the text for the item you are moving, then you can move the items. See demo1 video.
      • For draggable items with no move handle, it's capturing the touch on the item, but continuing to scroll the page (although highlighting the row, and also showing text as if dragging is going to happen). See demo2 video.

      Thanks,

      Mick

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                4 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  3/Dec/18