Skip to content

Commit c30ad0b

Browse files
lauriiilauriii
committed
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
(cherry picked from commit 8018374)
1 parent c748980 commit c30ad0b

File tree

9 files changed

+578
-10
lines changed

9 files changed

+578
-10
lines changed

‎misc/tabledrag.es6.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -558,10 +558,14 @@
558558
case 38:
559559
// Safari up arrow.
560560
case 63232: {
561-
let $previousRow = $(self.rowObject.element).prev('tr:first-of-type');
561+
let $previousRow = $(self.rowObject.element)
562+
.prev('tr')
563+
.eq(0);
562564
let previousRow = $previousRow.get(0);
563565
while (previousRow && $previousRow.is(':hidden')) {
564-
$previousRow = $(previousRow).prev('tr:first-of-type');
566+
$previousRow = $(previousRow)
567+
.prev('tr')
568+
.eq(0);
565569
previousRow = $previousRow.get(0);
566570
}
567571
if (previousRow) {
@@ -577,7 +581,9 @@
577581
previousRow &&
578582
$previousRow.find('.js-indentation').length
579583
) {
580-
$previousRow = $(previousRow).prev('tr:first-of-type');
584+
$previousRow = $(previousRow)
585+
.prev('tr')
586+
.eq(0);
581587
previousRow = $previousRow.get(0);
582588
groupHeight += $previousRow.is(':hidden')
583589
? 0
@@ -618,10 +624,13 @@
618624
case 63233: {
619625
let $nextRow = $(self.rowObject.group)
620626
.eq(-1)
621-
.next('tr:first-of-type');
627+
.next('tr')
628+
.eq(0);
622629
let nextRow = $nextRow.get(0);
623630
while (nextRow && $nextRow.is(':hidden')) {
624-
$nextRow = $(nextRow).next('tr:first-of-type');
631+
$nextRow = $(nextRow)
632+
.next('tr')
633+
.eq(0);
625634
nextRow = $nextRow.get(0);
626635
}
627636
if (nextRow) {

‎misc/tabledrag.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -285,10 +285,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
285285
case 38:
286286
case 63232:
287287
{
288-
var $previousRow = $(self.rowObject.element).prev('tr:first-of-type');
288+
var $previousRow = $(self.rowObject.element).prev('tr').eq(0);
289289
var previousRow = $previousRow.get(0);
290290
while (previousRow && $previousRow.is(':hidden')) {
291-
$previousRow = $(previousRow).prev('tr:first-of-type');
291+
$previousRow = $(previousRow).prev('tr').eq(0);
292292
previousRow = $previousRow.get(0);
293293
}
294294
if (previousRow) {
@@ -299,7 +299,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
299299
if ($(item).is('.tabledrag-root')) {
300300
groupHeight = 0;
301301
while (previousRow && $previousRow.find('.js-indentation').length) {
302-
$previousRow = $(previousRow).prev('tr:first-of-type');
302+
$previousRow = $(previousRow).prev('tr').eq(0);
303303
previousRow = $previousRow.get(0);
304304
groupHeight += $previousRow.is(':hidden') ? 0 : previousRow.offsetHeight;
305305
}
@@ -329,10 +329,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
329329
case 40:
330330
case 63233:
331331
{
332-
var $nextRow = $(self.rowObject.group).eq(-1).next('tr:first-of-type');
332+
var $nextRow = $(self.rowObject.group).eq(-1).next('tr').eq(0);
333333
var nextRow = $nextRow.get(0);
334334
while (nextRow && $nextRow.is(':hidden')) {
335-
$nextRow = $(nextRow).next('tr:first-of-type');
335+
$nextRow = $(nextRow).next('tr').eq(0);
336336
nextRow = $nextRow.get(0);
337337
}
338338
if (nextRow) {

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/**
2+
* @file
3+
* Testing behaviors for tabledrag library.
4+
*/
5+
(function($, Drupal) {
6+
/**
7+
* @type {Drupal~behavior}
8+
*
9+
* @prop {Drupal~behaviorAttach} attach
10+
* Removes a test class from the handle elements to allow verifying that
11+
* dragging operations have been executed.
12+
*/
13+
Drupal.behaviors.tableDragTest = {
14+
attach(context) {
15+
$('.tabledrag-handle', context)
16+
.once('tabledrag-test')
17+
.on('keydown.tabledrag-test', event => {
18+
$(event.currentTarget).removeClass('tabledrag-test-dragging');
19+
});
20+
},
21+
};
22+
})(jQuery, Drupal);

‎modules/system/tests/modules/tabledrag_test/js/tabledrag_test.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* DO NOT EDIT THIS FILE.
3+
* See the following change record for more information,
4+
* https://www.drupal.org/node/2815083
5+
* @preserve
6+
**/
7+
8+
(function ($, Drupal) {
9+
Drupal.behaviors.tableDragTest = {
10+
attach: function attach(context) {
11+
$('.tabledrag-handle', context).once('tabledrag-test').on('keydown.tabledrag-test', function (event) {
12+
$(event.currentTarget).removeClass('tabledrag-test-dragging');
13+
});
14+
}
15+
};
16+
})(jQuery, Drupal);

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<?php
2+
3+
namespace Drupal\tabledrag_test\Form;
4+
5+
use Drupal\Core\Form\FormBase;
6+
use Drupal\Core\Form\FormStateInterface;
7+
use Drupal\Core\State\StateInterface;
8+
use Symfony\Component\DependencyInjection\ContainerInterface;
9+
10+
/**
11+
* Provides a form for draggable table testing.
12+
*/
13+
class TableDragTestForm extends FormBase {
14+
15+
/**
16+
* The state service.
17+
*
18+
* @var \Drupal\Core\State\StateInterface
19+
*/
20+
protected $state;
21+
22+
/**
23+
* Constructs a TableDragTestForm object.
24+
*
25+
* @param \Drupal\Core\State\StateInterface $state
26+
* The state service.
27+
*/
28+
public function __construct(StateInterface $state) {
29+
$this->state = $state;
30+
}
31+
32+
/**
33+
* {@inheritdoc}
34+
*/
35+
public static function create(ContainerInterface $container) {
36+
return new static($container->get('state'));
37+
}
38+
39+
/**
40+
* {@inheritdoc}
41+
*/
42+
public function getFormId() {
43+
return 'tabledrag_test_form';
44+
}
45+
46+
/**
47+
* {@inheritdoc}
48+
*/
49+
public function buildForm(array $form, FormStateInterface $form_state) {
50+
$form['table'] = [
51+
'#type' => 'table',
52+
'#header' => [
53+
[
54+
'data' => $this->t('Text'),
55+
'colspan' => 4,
56+
],
57+
$this->t('Weight'),
58+
],
59+
'#tabledrag' => [
60+
[
61+
'action' => 'order',
62+
'relationship' => 'sibling',
63+
'group' => 'tabledrag-test-weight',
64+
],
65+
[
66+
'action' => 'match',
67+
'relationship' => 'parent',
68+
'group' => 'tabledrag-test-parent',
69+
'subgroup' => 'tabledrag-test-parent',
70+
'source' => 'tabledrag-test-id',
71+
'hidden' => TRUE,
72+
'limit' => 2,
73+
],
74+
[
75+
'action' => 'depth',
76+
'relationship' => 'group',
77+
'group' => 'tabledrag-test-depth',
78+
'hidden' => TRUE,
79+
],
80+
],
81+
'#attributes' => ['id' => 'tabledrag-test-table'],
82+
'#attached' => ['library' => ['tabledrag_test/tabledrag']],
83+
];
84+
85+
// Provide a default set of five rows.
86+
$rows = $this->state->get('tabledrag_test_table', array_flip(range(1, 5)));
87+
foreach ($rows as $id => $row) {
88+
if (!is_array($row)) {
89+
$row = [];
90+
}
91+
92+
$row += [
93+
'parent' => '',
94+
'weight' => 0,
95+
'depth' => 0,
96+
'classes' => [],
97+
'draggable' => TRUE,
98+
];
99+
100+
if (!empty($row['draggable'])) {
101+
$row['classes'][] = 'draggable';
102+
}
103+
104+
$form['table'][$id] = [
105+
'title' => [
106+
'indentation' => [
107+
'#theme' => 'indentation',
108+
'#size' => $row['depth'],
109+
],
110+
'#plain_text' => "Row with id $id",
111+
],
112+
'id' => [
113+
'#type' => 'hidden',
114+
'#value' => $id,
115+
'#attributes' => ['class' => ['tabledrag-test-id']],
116+
],
117+
'parent' => [
118+
'#type' => 'hidden',
119+
'#default_value' => $row['parent'],
120+
'#parents' => ['table', $id, 'parent'],
121+
'#attributes' => ['class' => ['tabledrag-test-parent']],
122+
],
123+
'depth' => [
124+
'#type' => 'hidden',
125+
'#default_value' => $row['depth'],
126+
'#attributes' => ['class' => ['tabledrag-test-depth']],
127+
],
128+
'weight' => [
129+
'#type' => 'weight',
130+
'#default_value' => $row['weight'],
131+
'#attributes' => ['class' => ['tabledrag-test-weight']],
132+
],
133+
'#attributes' => ['class' => $row['classes']],
134+
];
135+
}
136+
137+
$form['save'] = [
138+
'#type' => 'submit',
139+
'#value' => $this->t('Save'),
140+
];
141+
142+
return $form;
143+
}
144+
145+
/**
146+
* {@inheritdoc}
147+
*/
148+
public function submitForm(array &$form, FormStateInterface $form_state) {
149+
$test_table = [];
150+
foreach ($form_state->getValue('table') as $row) {
151+
$test_table[$row['id']] = $row;
152+
}
153+
154+
$this->state->set('tabledrag_test_table', $test_table);
155+
}
156+
157+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
type: module
2+
name: 'TableDrag test'
3+
description: 'Draggable table test module.'
4+
core: 8.x
5+
package: Testing
6+
version: VERSION

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
tabledrag:
2+
version: VERSION
3+
js:
4+
js/tabledrag_test.js: {}
5+
dependencies:
6+
- core/drupal.tabledrag

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
tabledrag_test.test_form:
2+
path: '/tabledrag_test'
3+
defaults:
4+
_form: '\Drupal\tabledrag_test\Form\TableDragTestForm'
5+
_title: 'Draggable table test'
6+
requirements:
7+
_access: 'TRUE'

0 commit comments

Comments
 (0)