Issue #2725259 by sardara, andrewmacpherson, claudiu.cristea, tedbow,...

Issue #2725259 by sardara, andrewmacpherson, claudiu.cristea, tedbow, alwaysworking, droplet, techmsi, kwoxer, xjm, alexpott, lauriii, catch, cilefen, Cottser: [regression] Table Drag handles no longer respond to up/down arrow keys

core/misc/tabledrag.es6.js

@@ -558,10 +558,14 @@
         case 38:
         // Safari up arrow.
         case 63232: {
-          let $previousRow = $(self.rowObject.element).prev('tr:first-of-type');
+          let $previousRow = $(self.rowObject.element)
+            .prev('tr')
+            .eq(0);
           let previousRow = $previousRow.get(0);
           while (previousRow && $previousRow.is(':hidden')) {
-            $previousRow = $(previousRow).prev('tr:first-of-type');
+            $previousRow = $(previousRow)
+              .prev('tr')
+              .eq(0);
             previousRow = $previousRow.get(0);
           }
           if (previousRow) {
@@ -577,7 +581,9 @@
                 previousRow &&
                 $previousRow.find('.js-indentation').length
               ) {
-                $previousRow = $(previousRow).prev('tr:first-of-type');
+                $previousRow = $(previousRow)
+                  .prev('tr')
+                  .eq(0);
                 previousRow = $previousRow.get(0);
                 groupHeight += $previousRow.is(':hidden')
                   ? 0
@@ -618,10 +624,13 @@
         case 63233: {
           let $nextRow = $(self.rowObject.group)
             .eq(-1)
-            .next('tr:first-of-type');
+            .next('tr')
+            .eq(0);
           let nextRow = $nextRow.get(0);
           while (nextRow && $nextRow.is(':hidden')) {
-            $nextRow = $(nextRow).next('tr:first-of-type');
+            $nextRow = $(nextRow)
+              .next('tr')
+              .eq(0);
             nextRow = $nextRow.get(0);
           }
           if (nextRow) {

core/misc/tabledrag.js

@@ -285,10 +285,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         case 38:
         case 63232:
           {
-            var $previousRow = $(self.rowObject.element).prev('tr:first-of-type');
+            var $previousRow = $(self.rowObject.element).prev('tr').eq(0);
             var previousRow = $previousRow.get(0);
             while (previousRow && $previousRow.is(':hidden')) {
-              $previousRow = $(previousRow).prev('tr:first-of-type');
+              $previousRow = $(previousRow).prev('tr').eq(0);
               previousRow = $previousRow.get(0);
             }
             if (previousRow) {
@@ -299,7 +299,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
               if ($(item).is('.tabledrag-root')) {
                 groupHeight = 0;
                 while (previousRow && $previousRow.find('.js-indentation').length) {
-                  $previousRow = $(previousRow).prev('tr:first-of-type');
+                  $previousRow = $(previousRow).prev('tr').eq(0);
                   previousRow = $previousRow.get(0);
                   groupHeight += $previousRow.is(':hidden') ? 0 : previousRow.offsetHeight;
                 }
@@ -329,10 +329,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         case 40:
         case 63233:
           {
-            var $nextRow = $(self.rowObject.group).eq(-1).next('tr:first-of-type');
+            var $nextRow = $(self.rowObject.group).eq(-1).next('tr').eq(0);
             var nextRow = $nextRow.get(0);
             while (nextRow && $nextRow.is(':hidden')) {
-              $nextRow = $(nextRow).next('tr:first-of-type');
+              $nextRow = $(nextRow).next('tr').eq(0);
               nextRow = $nextRow.get(0);
             }
             if (nextRow) {

core/modules/system/tests/modules/tabledrag_test/js/tabledrag_test.es6.js

+/**
+ * @file
+ * Testing behaviors for tabledrag library.
+ */
+(function($, Drupal) {
+  /**
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Removes a test class from the handle elements to allow verifying that
+   *   dragging operations have been executed.
+   */
+  Drupal.behaviors.tableDragTest = {
+    attach(context) {
+      $('.tabledrag-handle', context)
+        .once('tabledrag-test')
+        .on('keydown.tabledrag-test', event => {
+          $(event.currentTarget).removeClass('tabledrag-test-dragging');
+        });
+    },
+  };
+})(jQuery, Drupal);

core/modules/system/tests/modules/tabledrag_test/js/tabledrag_test.js

+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+(function ($, Drupal) {
+  Drupal.behaviors.tableDragTest = {
+    attach: function attach(context) {
+      $('.tabledrag-handle', context).once('tabledrag-test').on('keydown.tabledrag-test', function (event) {
+        $(event.currentTarget).removeClass('tabledrag-test-dragging');
+      });
+    }
+  };
+})(jQuery, Drupal);
\ No newline at end of file

core/modules/system/tests/modules/tabledrag_test/src/Form/TableDragTestForm.php

+<?php
+
+namespace Drupal\tabledrag_test\Form;
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\State\StateInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Provides a form for draggable table testing.
+ */
+class TableDragTestForm extends FormBase {
+
+  /**
+   * The state service.
+   *
+   * @var \Drupal\Core\State\StateInterface
+   */
+  protected $state;
+
+  /**
+   * Constructs a TableDragTestForm object.
+   *
+   * @param \Drupal\Core\State\StateInterface $state
+   *   The state service.
+   */
+  public function __construct(StateInterface $state) {
+    $this->state = $state;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static($container->get('state'));
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'tabledrag_test_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['table'] = [
+      '#type' => 'table',
+      '#header' => [
+        [
+          'data' => $this->t('Text'),
+          'colspan' => 4,
+        ],
+        $this->t('Weight'),
+      ],
+      '#tabledrag' => [
+        [
+          'action' => 'order',
+          'relationship' => 'sibling',
+          'group' => 'tabledrag-test-weight',
+        ],
+        [
+          'action' => 'match',
+          'relationship' => 'parent',
+          'group' => 'tabledrag-test-parent',
+          'subgroup' => 'tabledrag-test-parent',
+          'source' => 'tabledrag-test-id',
+          'hidden' => TRUE,
+          'limit' => 2,
+        ],
+        [
+          'action' => 'depth',
+          'relationship' => 'group',
+          'group' => 'tabledrag-test-depth',
+          'hidden' => TRUE,
+        ],
+      ],
+      '#attributes' => ['id' => 'tabledrag-test-table'],
+      '#attached' => ['library' => ['tabledrag_test/tabledrag']],
+    ];
+
+    // Provide a default set of five rows.
+    $rows = $this->state->get('tabledrag_test_table', array_flip(range(1, 5)));
+    foreach ($rows as $id => $row) {
+      if (!is_array($row)) {
+        $row = [];
+      }
+
+      $row += [
+        'parent' => '',
+        'weight' => 0,
+        'depth' => 0,
+        'classes' => [],
+        'draggable' => TRUE,
+      ];
+
+      if (!empty($row['draggable'])) {
+        $row['classes'][] = 'draggable';
+      }
+
+      $form['table'][$id] = [
+        'title' => [
+          'indentation' => [
+            '#theme' => 'indentation',
+            '#size' => $row['depth'],
+          ],
+          '#plain_text' => "Row with id $id",
+        ],
+        'id' => [
+          '#type' => 'hidden',
+          '#value' => $id,
+          '#attributes' => ['class' => ['tabledrag-test-id']],
+        ],
+        'parent' => [
+          '#type' => 'hidden',
+          '#default_value' => $row['parent'],
+          '#parents' => ['table', $id, 'parent'],
+          '#attributes' => ['class' => ['tabledrag-test-parent']],
+        ],
+        'depth' => [
+          '#type' => 'hidden',
+          '#default_value' => $row['depth'],
+          '#attributes' => ['class' => ['tabledrag-test-depth']],
+        ],
+        'weight' => [
+          '#type' => 'weight',
+          '#default_value' => $row['weight'],
+          '#attributes' => ['class' => ['tabledrag-test-weight']],
+        ],
+        '#attributes' => ['class' => $row['classes']],
+      ];
+    }
+
+    $form['save'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Save'),
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $test_table = [];
+    foreach ($form_state->getValue('table') as $row) {
+      $test_table[$row['id']] = $row;
+    }
+
+    $this->state->set('tabledrag_test_table', $test_table);
+  }
+
+}

core/modules/system/tests/modules/tabledrag_test/tabledrag_test.info.yml

+type: module
+name: 'TableDrag test'
+description: 'Draggable table test module.'
+core: 8.x
+package: Testing
+version: VERSION

core/modules/system/tests/modules/tabledrag_test/tabledrag_test.libraries.yml

+tabledrag:
+  version: VERSION
+  js:
+    js/tabledrag_test.js: {}
+  dependencies:
+    - core/drupal.tabledrag

core/modules/system/tests/modules/tabledrag_test/tabledrag_test.routing.yml

+tabledrag_test.test_form:
+  path: '/tabledrag_test'
+  defaults:
+    _form: '\Drupal\tabledrag_test\Form\TableDragTestForm'
+    _title: 'Draggable table test'
+  requirements:
+    _access: 'TRUE'