Problem/Motivation

Console error on node edit form:
TypeError: Cannot read properties of undefined (reading 'querySelector')

Steps to reproduce

  1. Create a node that has a paragraph entity reference field, referring to the layout_paragraphs paragraph
  2. Insert content for a single row
  3. Try to move the content via drag/drop
  4. Observe the error in the console
  5. Also notice that you cannot "drop" the selected element

Please note that this also occurs once saved and then trying to edit the layout paragraph again.

Proposed resolution

Add extra conditions to updateMoveButtons() in builder.js

Before

(_components$0$querySe = components[0].querySelector('.lpb-up')) === null || _components$0$querySe === void 0 || _components$0$querySe.setAttribute('tabindex', '-1');
      (_components$querySele = components[components.length - 1].querySelector('.lpb-down')) === null || _components$querySele === void 0 || _components$querySele.setAttribute('tabindex', '-1');

After

(_components$0$querySe = components[0] && components[0].querySelector('.lpb-up')) === null || _components$0$querySe === void 0 || _components$0$querySe.setAttribute('tabindex', '-1');
      (_components$querySele = components[components.length - 1] && components[components.length - 1].querySelector('.lpb-down')) === null || _components$querySele === void 0 || _components$querySele.setAttribute('tabindex', '-1');

Alternatively, look into updating move buttons, only if there are multiple elements?

CommentFileSizeAuthor
#25 layout_paragraphs-3467793-25.patch806 bytesluisnicg
#15 layout_paragraphs-3467793-15.patch1.33 KBckng
#13 dragndropjsdebug.mp45.53 MBnicholass
#4 uncaught-type-error-queryselector-on-undefined-3467793-4.patch2.19 KBmistrytheory
#3 uncaught-type-error-queryselector-on-undefined-3467793-3.patch2.2 KBmistrytheory

Issue fork layout_paragraphs-3467793

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

mistrytheory created an issue. See original summary.

mistrytheory’s picture

mistrytheory commented
Issue summary: View changes
mistrytheory’s picture

mistrytheory commented
StatusFileSize
new uncaught-type-error-queryselector-on-undefined-3467793-3.patch2.2 KB

Patch based on proposed solution.

mistrytheory’s picture

mistrytheory commented
StatusFileSize
new uncaught-type-error-queryselector-on-undefined-3467793-4.patch2.19 KB

Updated patch that actually works

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

sethhill’s picture

sethhill commented
Status: Active » Postponed (maintainer needs more info)

I haven't been able to replicate this error on 2.0.8 or the latest 2.0.x branch. Can you provide more information on your configuration?

ckng’s picture

ckng
Primary language English
commented

Just ran into exactly same issue. Tested patch #4, working for us.
Having the issue on
- core 10.3.2
- LP 2.0.6-2.0.8

ckng’s picture

ckng
Primary language English
commented
Status: Postponed (maintainer needs more info) » Active
ckng’s picture

ckng
Primary language English
commented
Status: Active » Postponed (maintainer needs more info)

Sorry, didn't mean to change that.
Tested 2.1.0, so far unable to reproduce the issue.

vit.smutny’s picture

vit.smutny commented

Hello, I encountered an issue while using multiple fields directly in a node with Layout Paragraphs in version 2.1.0. If there are multiple fields with Layout Paragraphs in a node, it only works correctly for elements in the first field. In each subsequent field with Layout Paragraphs, it does not function properly.

For me, the fix from patch #4 worked, but only the first part, and not in the file builder.es6.js, but in builder.js.

nicholass’s picture

nicholass
Primary language English
Location FL
commented

@ckng see https://www.drupal.org/project/layout_paragraphs/issues/3476838 for video demo of problem, not sure what exact conditions you have to have for the drag and drop to not work, but its only on some of our content pages not all.

nicholass opened merge request !185

nicholass’s picture

nicholass
Primary language English
Location FL
commented
StatusFileSize
new dragndropjsdebug.mp45.53 MB

Created a patch for 2.1.x branch, patch #4 could not apply for me, so use https://git.drupalcode.org/project/layout_paragraphs/-/merge_requests/18...

Here is a debugger on the issue for those interested
https://www.drupal.org/files/issues/2024-10-03/dragndropjsdebug.mp4

nicholass’s picture

nicholass
Primary language English
Location FL
commented
Version: 2.0.8 » 2.1.0
Status: Postponed (maintainer needs more info) » Needs review
ckng’s picture

ckng
Primary language English
commented
StatusFileSize
new layout_paragraphs-3467793-15.patch1.33 KB

Ran into the issue again. Rerolled and rebased to 2.1.x. Generated patch.

hoemmawelt’s picture

hoemmawelt commented

I tested it in a Drupal 11 installation and the error is fixed by the patch #15. The "move up" and "move down" buttons are now removed from the keyboard navigation when only one item is present.

hoemmawelt’s picture

hoemmawelt commented
Status: Needs review » Reviewed & tested by the community
pixelwhip’s picture

pixelwhip commented

I can also confirm patch #15 fixes this issue for me.

  • sethhill committed 5973bfc1 on 2.1.x authored by nicholass 
    Issue #3467793 by nicholass, mistrytheory, ckng, gnuschichten, vit....
sethhill’s picture

sethhill commented
Status: Reviewed & tested by the community » Fixed
sethhill’s picture

sethhill commented
Status: Fixed » Reviewed & tested by the community
justin2pin’s picture

justin2pin commented
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

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

luisnicg’s picture

luisnicg commented
StatusFileSize
new layout_paragraphs-3467793-25.patch806 bytes

I'm still facing this issue under certain conditions on version 2.1.3 which I describe below:

1. Create a nested paragraph for example an Accordion Item which contain an Entity reference revisions field with more paragraphs
2. The formatter of the field that contains more paragraphs was set to "Layout Paragraph Builder (Experimental)"
3. Create the component parent "Accordion" which contain the Entity reference revisions field to bring the the Accordion Item paragraph.
4. The formatter of this field was set to Rendered Entity
5. Add a content type with the field that include the Accordion and set the widget and formatter as "Layout Paragraph"

Due to this configuration the code in the file builder-form.js is loaded but never find the element.

      $(once('lpb-builder-form', '[data-lpb-id]', context)).on(events, (e) => {
        e.currentTarget
          .closest('[data-lpb-form-id]')
          .querySelector('[data-drupal-selector="edit-close"]').value =
          Drupal.t('Cancel');
      });

I added a patch that basically validates if the element exist.

tiago’s picture

tiago commented

@luisnicg, the case from #25 is still there on 3.0.x, so I opened a follow-up with your patch as a merge request against 3.0.x: #3627475: builder-form.js throws when a component event fires outside the builder form.