Problem/Motivation

Follow-up to #3467793: TypeError: Cannot read properties of undefined (reading 'querySelector'). That issue fixed builder.js; comment #25 reports the same error from builder-form.js, which is still unguarded on 3.0.x.

Drupal.behaviors.layoutParagraphsBuilderForm changes the builder's "Close" button to "Cancel" when a component event (lpb-component:insert, update, move, drop) fires on a [data-lpb-id] element. It assumes that element is inside the builder form:
e.currentTarget.closest('[data-lpb-form-id]').querySelector('[data-drupal-selector="edit-close"]').value = Drupal.t('Cancel');

A Layout Paragraphs widget inside a component dialog, for example the paragraphs field of an accordion item, is a [data-lpb-id] element outside the builder form. Its events make closest() return null, and the behavior throws:
TypeError: Cannot read properties of null (reading 'querySelector')

Steps to reproduce

From #3467793-25:

  1. Create a paragraph type (e.g. Accordion Item) with a paragraphs field using the Layout Paragraphs widget.
  2. Use the "Layout Paragraphs Builder (Experimental)" formatter on the content type's paragraphs field.
  3. Open the frontend builder, edit an accordion item and change its own paragraphs in the dialog: the browser console shows the TypeError, and the builder's JavaScript stops.

Proposed resolution

Return early when the element is not inside a builder form, and only set the label when the close button exists. This is the patch from #3467793-25 by @luisnicg, against 3.0.x.

The merge request adds a Cypress test that opens the frontend builder, fires a component event on a [data-lpb-id] element outside the builder form (no error, the button keeps "Close"), and then one inside it (the button becomes "Cancel"). The first part fails without the fix with the TypeError above.

Remaining tasks

  • Review.

User interface changes

None.

API changes

None.

Data model changes

None.

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:

Comments

tiago created an issue. See original summary.

tiago’s picture

Status: Active » Needs review
StatusFileSize
new3.5 KB

MR !283 applies the patch from #3467793-25 by @luisnicg to 3.0.x (with a trailing comma for prettier) and adds a Cypress test that fires a component event outside the builder form; it fails without the fix with the TypeError from the summary.

I have also attached the patch here.

  • justin2pin committed 68691b06 on 3.0.x
    Issue #3627475: Ignore component events outside the builder form in...
justin2pin’s picture

Status: Needs review » 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.