Problem/Motivation

Javascript breaking on the block layout page when a row is dragged
The issue was caused by the Refactor (if feasible) use of jquery is function to use vanillaJS

Steps to reproduce

  • Access drupal instance and open console
  • go to /admin/structure/block and drag any row
  • you should able to see the following error message: block.js?v=10.2.0-dev:138 Uncaught TypeError: rowObject.matches is not a function

Proposed resolution

Fix parameter passed to function updateLastPlaced block.js
update line 247 to pass row[0] instead of row
Also, fix the parameter on line 175 passing this.element instead of this object.

Remaining tasks

no

User interface changes

no

API changes

no

Data model changes

no

Release notes snippet

no

CommentFileSizeAuthor
#4 test-success.png56.11 KBjoaopauloc.dev
#4 after-fix (1).gif10.42 MBjoaopauloc.dev
#3 after-fix.gif4.66 MBjoaopauloc.dev
#3 issue.gif11.16 MBjoaopauloc.dev
issue-row-drag.png62.29 KBjoaopauloc.dev

Issue fork drupal-3384853

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

joaopauloc.dev created an issue. See original summary.

joaopauloc.dev opened merge request !4690

joaopauloc.dev’s picture

joaopauloc.dev commented
Issue summary: View changes
StatusFileSize
new issue.gif11.16 MB
new after-fix.gif4.66 MB
joaopauloc.dev’s picture

joaopauloc.dev commented
Assigned: joaopauloc.dev » Unassigned
StatusFileSize
new after-fix (1).gif10.42 MB
new test-success.png56.11 KB

Retesting because local tests passed including the specific test that failed as the image attached

joaopauloc.dev’s picture

joaopauloc.dev commented
Issue summary: View changes
Status: Active » Needs review
Issue tags: +Needs Review Queue Initiative, +Usability, +Site builder experience (SX)
cilefen’s picture

cilefen commented
Issue tags: -Needs Review Queue Initiative, -Usability, -Site builder experience (SX)

I am removing initiative tags normally managed by teams.

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Can confirm this issue only on 11.x branch.

The MR does resolve the issue and with such a small change not sure if a test case is needed? Could be wrong lets see.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs work

Added comment to the MR

joaopauloc.dev’s picture

joaopauloc.dev commented
Assigned: Unassigned » joaopauloc.dev

I'll check, but I think it is not. It is the row drag object being passed. Because on line 137 in function updateLastPlaced the rowObject is converted to jQuery object like const $rowObject = $(rowObject);

joaopauloc.dev’s picture

joaopauloc.dev commented
Assigned: joaopauloc.dev » Unassigned
Status: Needs work » Needs review

Fix cr issues and added unit tests for drag and drop on block layout page.

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Verified that the console error is still resolved and drag n drop still works

joseph.olstad’s picture

joseph.olstad
Primary language French
commented

#3291587: Regression fix for (if feasible) uses of the jQuery trim function to use vanillaJS

joseph.olstad’s picture

joseph.olstad
Primary language French
commented
Related issues: +#3291587: Regression fix for (if feasible) uses of the jQuery trim function to use vanillaJS
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs work

Nice work! Posted few comments regarding docs that still need to be updated.

joaopauloc.dev’s picture

joaopauloc.dev commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Followed the steps again in the IS and issue is still resovled.

nod_ made their first commit to this issue’s fork.

  • nod_ committed 905415d9 on 11.x 
    Issue #3384853 by joaopauloc.dev, smustgrave, lauriii: Javascript...

  • nod_ committed 6c4de97b on 10.2.x 
    Issue #3384853 by joaopauloc.dev, smustgrave, lauriii: Javascript...
nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Fixed

Committed 905415d and pushed to 11.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.