Error in Drag & Drop with multiple draggables using keyboard navigation

papi Jo's picture

Drag & Drop with multiple draggables using keyboard navigation. See my sample activity at https://h5p.org/node/213152.

Use Chrome, press F12 to open the console.

Click the multiple (infinite) draggable "MULTI drag 00" and press Enter to select it. The only available dropzone "dropzone 00" gets highlighted. Press Enter again to drop the draggable there. OK. Now suppose you change your mind and decide to move that draggable out of the dropzone. Press Enter again to select it (it changes from blue to pink). Press the Down Arrow key to select as target the "MULTI drag 00" invisible dropzone to the right of the screen (it's invisible but it's located at the same place as the original "MULTI drag 00" draggable, to the right of the task zone. Press Enter. It works, the draggable is reset/returned to its original place.

However, the console now displays the error:

Uncaught TypeError: Cannot read property 'draggable' of undefined
    at js_Feq3p9ZUXp-oQV0NZHehbn0G-bh9BUfNO5uQKCNZ0rg.js:18594
    at js_Feq3p9ZUXp-oQV0NZHehbn0G-bh9BUfNO5uQKCNZ0rg.js:18594
    at Array.every (<anonymous>)
    at e.fire (js_Feq3p9ZUXp-oQV0NZHehbn0G-bh9BUfNO5uQKCNZ0rg.js:18594)
    at e.value (js_Feq3p9ZUXp-oQV0NZHehbn0G-bh9BUfNO5uQKCNZ0rg.js:18594)
    at e.value (js_Feq3p9ZUXp-oQV0NZHehbn0G-bh9BUfNO5uQKCNZ0rg.js:18594)
    at e.value (js_Feq3p9ZUXp-oQV0NZHehbn0G-bh9BUfNO5uQKCNZ0rg.js:18594)

I suggest the following fix:

In c:\xampp\htdocs\drupal7\sites\default\files\h5p\development\h5p-drag-question\src\drag-question.js at // Handle dropzone selected through keyboard

remove those lines which cause the error:

      if (!selected.draggable.multiple) {
        selected.element.$.css({
          left: selected.draggable.x + '%',
          top: selected.draggable.y + '%',
          width: selected.draggable.width + 'em',
          height: selected.draggable.height + 'em'
        });
        selected.draggable.updatePlacement(selected.element);
      }
      selected.element.$[0].setAttribute('aria-grabbed', 'false');
      deselect();

papi Jo

 

 

 

Content types: 
BV52's picture

Hi papi Jo,

Thank you for reporting this. I have filed a report and you can follow it here.

-BV52

icc's picture

Thanks for locating and reporting this issue. I've done a fix in 9556353 that should be part of the next version.