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:
- Create a paragraph type (e.g. Accordion Item) with a paragraphs field using the Layout Paragraphs widget.
- Use the "Layout Paragraphs Builder (Experimental)" formatter on the content type's paragraphs field.
- 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.
| Comment | File | Size | Author |
|---|---|---|---|
| #3 | layout_paragraphs-builder_form_events_outside_form-3627475-3.patch | 3.5 KB | tiago |
Issue fork layout_paragraphs-3627475
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
Comment #3
tiago commentedMR !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.
Comment #5
justin2pin commented