Problem/Motivation
With add_mode: modal (the categorized "tiles" add dialog), clicking Add [component] opens the modal but it's completely empty — no paragraph-type tiles. This affects every entity/field using the modal add widget.
The dialog frame opens at its configured width, but the content area collapses to 0×0. Root cause:
Drupal.paragraphsAddModal.openDialog() (in js/paragraphs_ee.admin.js) clones the in-form .paragraphs-ee-dialog-wrapper element and hands the clone to Drupal.dialog(). That wrapper carries the js-hide class — added in paragraphs_ee_field_widget_complete_form_alter() — so it stays hidden inline until the dialog is opened.
Drupal core (core/modules/system/css/components/js.module.css) in 11.4.x-dev defines:
@media (scripting: enabled) {
.js-hide { display: none !important; }
}The !important overrides the inline display: block that jQuery UI sets on the dialog's content element, so the cloned wrapper stays display: none. The buttons exist in the DOM but the entire content subtree measures 0×0 → blank modal.
This was previously masked: the older core rule .js .js-hide { display: none; } (no !important, now only in the stable9 theme) let jQuery UI's inline style win.
Steps to reproduce
- Install Drupal 11.4.x-dev
- Install paragraphs + paragraphs_ee.
- On a paragraphs reference field's form display, set the widget Add mode = Modal (categorized/tiles dialog).
- Edit a node with that field and click Add [widget title].
- Observed: the dialog opens but shows no paragraph-type tiles.
- Confirm in the console: document.querySelectorAll('.ui-dialog-content .paragraphs-button--add-more').length returns the expected count (buttons are present), yet getComputedStyle(document.querySelector('.ui-dialog-content')).display is none and its offsetWidth is 0.
Expected: the dialog shows the paragraph-type tiles.
Proposed resolution
In Drupal.paragraphsAddModal.openDialog(), strip js-hide from the cloned element before passing it to Drupal.dialog():
- $element = $element.clone(true);
+ $element = $element.clone(true).removeClass('js-hide');Remaining tasks
User interface changes
API changes
Data model changes
Issue fork paragraphs_ee-3593322
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
ltrainComment #4
ltrainComment #6
stborchertThanks for finding this and providing a fix. I changed the target to 10.1.x since it is meant to work with 11.3+ while 10.0.x is meant for older versions. I didn't restrict 10.0.x yet but maybe it's better to do so soon.