Broken handle in nested draggable tables.

Created on 20 July 2018, about 6 years ago
Updated 6 December 2023, 9 months ago

Hi!

I try to create draggable table with nested draggable tables in rows of main table.
But handle (draggable icon) for first row of main table is attached to last row of child elements of nested table, because those row also contains 'td' with indentation element. As a result those last row contains two draggable icons - it's own and from parent row of main table.
Simplified version of table's structure I have:

<table>
  <tbody>
      <tr class ="draggable">
        <td>
          <table>
            <tbody>
              <tr class ="'draggable tabledrag-root"> ... </tr>
              <tr class ="'draggable tabledrag-leaf"> <td> <div class="js-indentation indentation">&nbsp;</div></td> ... </tr>
             </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

In tabledrag.js we have:
....

 $table.find('> tr.draggable, > tbody > tr.draggable').each(function () {
      self.makeDraggable(this);
    });

....

Drupal.tableDrag.prototype.makeDraggable = function (item) {
....

var handle = $('<a href="#" class="tabledrag-handle"><div class="handle">&nbsp;</div></a>').attr('title', Drupal.t('Drag to re-order'));

    var $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1);

I think it should be:
var $indentationLast = $item.find('> td:first-of-type').find('.js-indentation').eq(-1);
In such case we would find last '.js-indentation' from correct 'td' element - first in current row, not last in all found first 'td's elements inside current rows.

I'll prepare patch.

🐛 Bug report
Status

Needs work

Version

10.1

Component
Javascript 

Last updated 1 day ago

Created by

🇺🇦Ukraine khiminrm

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

    Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

    Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

  • First commit to issue fork.
  • @arunkumark opened merge request.
  • Status changed to Needs review over 1 year ago
  • 🇮🇳India arunkumark Coimbatore

    I have re-rolled the patch and created the MR

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    Be useful to have step to reproduce the issue.

    Will need a test case showing the issue also.

  • Status changed to Needs review 9 months ago
  • 🇻🇳Vietnam linhnm

    I encountered this issue on Drupal 10.1.

    Steps to reproduce

    1. Create a custom field widget with tabledrag for unlimited fields..
      $element['table-row'] = [
            '#type' => 'table',
            '#header' => [
              $this->t('Column @number', [
                '@number' => $delta + 1,
              ]),
              $this->t('Weight'),
              $this->t('Parent'),
            ],
            '#empty' => $this->t('Sorry, There are no items!'),
            '#prefix' => "<div id='links-fieldset-wrapper-{$delta}'>",
            '#suffix' => '</div>',
            '#tabledrag' => [
              [
                'action' => 'match',
                'relationship' => 'parent',
                'group' => 'row-pid',
                'source' => 'row-id',
                'hidden' => TRUE,
                'limit' => FALSE,
              ],
              [
                'action' => 'order',
                'relationship' => 'sibling',
                'group' => 'row-weight',
              ],
            ],
          ];
    2. The tabledrag icon for the multiple fields is being added to the last child js-indentation

    I have re-rolled the patch for the 10.1

  • Status changed to Needs work 9 months ago
  • 🇺🇸United States smustgrave

    Was tagged for tests which are still needed.

    Probably needs an issue summary update also using the standard issue template

Production build 0.71.5 2024