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

  1. Install Drupal 11.4.x-dev
  2. Install paragraphs + paragraphs_ee.
  3. On a paragraphs reference field's form display, set the widget Add mode = Modal (categorized/tiles dialog).
  4. Edit a node with that field and click Add [widget title].
  5. Observed: the dialog opens but shows no paragraph-type tiles.
  6. 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

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

ltrain created an issue. See original summary.

ltrain’s picture

Status: Active » Needs review
ltrain’s picture

Issue summary: View changes

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

stborchert’s picture

Version: 10.0.8 » 10.1.x-dev
Status: Needs review » Fixed

Thanks 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.

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.