Nested modals don't work: opening a modal from a modal closes the original

I can confirm patch 91 doesn't work.

This is on Drupal 9.5.5, but... hoping the patch carries backwards.

I have a media entity which takes vimeo URLs.

But the project needs to upload their own custom placeholder image, but we want to use media for that.

So media library opens a modal for the VIDEO entity type, then clicking the add media button for the place holder image, opens the 2nd modal.

Selecting the image sends you back to the node edit screen ... and, you lose the other work you did to build the video entity.

Updating attributions

Hello,
I noticed a bug like this, so I don't know if it's related to this issue or not, but when I have a field media in a Node that has a media field itself, when I try to add a media in the modale I have a 500 error in the logs.

To reproduce:
- Have activated the modules: Node, Media and Media Library (No Contrib module is involved, I reproduced this Bug on an instance without, I even deactivated CKeditor.)
- Create Media with a media field (and put media library in the formatter form)
- Create a Node which is linked to the media field created (and put media library in the formatter form and also put the field in the formatter of media library)
- Add a content of this Node then add a media on the media field, which allows to open the modal
- Once the modal is open, add media via the upload form, which then allows you to arrive on the modification page
- Click on add media
- Nothing is happening

I have warnings in logs :

Warning: count(): Parameter must be an array or an object that implements Countable in Drupal\media_library\Form\FileUploadForm->validateUploadElement() (line 211 of /var/lib/tugboat/stm/web/core/modules/media_library/src/Form/FileUploadForm.php)

Notice: Undefined index: fids in Drupal\media_library\Form\FileUploadForm->validateUploadElement() (line 211 of /var/lib/tugboat/stm/web/core/modules/media_library/src/Form/FileUploadForm.php)

And i have an error in the console (which I also have in the logs) :

Ran into this today and tested the workaround patch in #91. My test case is a media library widget, where the user uploads a new image media entity. The image entity bundle has a CKEditor-enabled text field. Before the patch, clicking the Link button in the CKE dialog closes the Media Library widget prematurely. After the patch, the link dialog opens on top of it as it should. However, it seems to cause other issues. After closing the link dialog and saving the entity, the "Save and Select" button doesn't close the Media Library dialog anymore.

With the widespread adoption of the HTML dialog element, this should become more a matter of modernizing modals. This element supports chaining dialogs, styling, form awareness, good accessibility, and a host of other benefits.

Simple example:

  <dialog id="first-dialog">
    <p>Greetings, one and all!</p>
    <button data-role="open-dialog" data-target="#second-dialog" onclick="document.querySelector(this.getAttribute('data-target')).showModal()">Show second dialog</button>
    <button data-role="close-dialog" onclick="this.closest('dialog').close()">Close</button>
  </dialog>
  <dialog id="second-dialog">
    <p>Surprise!</p>
    <button data-role="close-dialog" onclick="closest('dialog').close()">Close</button>
  </dialog>
  <button data-role="open-dialog" data-target="#first-dialog" onclick="document.querySelector(this.getAttribute('data-target')).showModal()">Show dialog</button>

#91 can't be apply on 10.1.

Here's the new version

Reroll of #91 as reroll at #106 was reporting as a corrupt patch file using git apply

D10.0 version for those who need it

More work here to support multiple editor dialogs, the saveCallback was previously only a single function but needs to be a Map keyed by the dialog selector

Fixed linting issues and regression with the 'Save and insert' button in media library (argument order mismatch)

CC Failure.

Also can the proposed solution be updated to include what path was taken.

Rerolled the patch for 11.x as the patch was not getting applied.
Please review.

Uploading patch for 10.1.2 in case someone needs to use the fix for stable version. The change from 11.x patch for this file core/misc/dialog/dialog.js didn't work, because it has already more changes.

The previous patch had a typo core/modules/media_library/src/MediaLibraryEditorOpener.php:

--- a/core/modules/media_library/src/MediaLibraryEditorOpener.php
+++ b/core/modules/media_library/src/MediaLibraryEditorOpener.php
@@ -70,7 +70,7 @@ public function getSelectionResponse(MediaLibraryState $state, array $selected_i
         'data-entity-uuid' => $selected_media->uuid(),
       ],
     ];
-    $response->addCommand(new EditorDialogSave($values));
+   $$response->addCommand(new EditorDialogSave($values, '#modal-media-library'));
 
     return $response;
   }

double $$. This is fixed in the new one. This patch is only to use in the project, there is no need to review it or test it.

2741877-10.1.5-115.patch not working with D10.1.16

Re-rolling the patch for 10.1.6

Tried to fix failures in #118.

I think the re-rolls from #113 onward are not really working, here are a Drupal 10.1 patch and a Drupal 11 patch that are functional.

Fixed failures in #119.

Still needs an issue summary update before reviews.

Reroll for 10.2

Hiding patch, it's the same as in #2741877-121: Nested modals don't work: opening a modal from a modal closes the original → .

I should have checked first. 😭

Fixed a bug that was caused by dialogSettings.options property. It led to unexpected behavior on modals. Sometimes they missed actions, not opened at all.

The reroll from #123 seems to be missing a few things. Embedding media doesn't seem to work with this reroll.

I've literally rerolled the d10 patch from #119 and there are a few differences.

Darren Oh → made their first commit to this issue’s fork.

Mithun S → made their first commit to this issue’s fork.

Resolved the Linting issue appearing on MR.

I'm facing the issue only when trying to update the content that has two nested modals to work.
Facing this error after applying the patch at #126 🐛 Nested modals don't work: opening a modal from a modal closes the original Needs work , I have tried almost every patch mentioned here.
I tried on ckeditor4 and as well as on ckeditor5. I'm using Drupal 10.2.6, I'm using entity_embed to upload the media.

Noting here that I’m seeing a JS console error in D10.2.6 (with either patch #126 or the merge request since they are virtually the same) when attempting to embed media in ckeditor5 using a newly uploaded image and clicking the "Save and insert" button with the Media Library advanced UI enabled:

ajax.js?v=10.2.6:1143
An error occurred during the execution of the Ajax response: TypeError: Cannot read properties of undefined (reading 'options')

Attached a static patch file from the Drupal Core 2024-06-20 MR 8105
witch applies to both Drupal 10.3.x and 11.0.x branches
To be used with composer patches

Patch #134 worked perfectly on Drupal 10.3.0. Thanks for the re-roll Rajab.

Attaching a patch file from the MR 8779 which applies to Drupal 10.2.x. (tested on 10.2.7) , to be used with composer patches.
It fixes an Ajax error from happening with the Layout builder modal and Drupal-off-canvas that wasn't fixed by the #126.
The Ajax error was preventing the LB modal from closing.

xavier.masson → made their first commit to this issue’s fork.

Patch #137 for Drupal 10.3.x

Patch #137 for Drupal 10.3.x with:

• 025fb5d2 - Ensure dialogSettings variable is a object for dialog:afterclose event listener

Sorry, #140 patch was bad.

Patch #137 for Drupal 10.3.x with:

025fb5d2 - Ensure dialogSettings variable is a object for dialog:afterclose event listener

The patch works in some cases, but I have the same issues as described in #132

None of the patches works for me:

What works:
Without this or any patch, When editing a node which is in modal and then opening a nother modal over it ( media entity browser for uploading media) works so that a modal opens over another modal and it can be closed without closing the parent.

So nested modals are working with media entity browser and node.

What does not work:
When editing a node which is in modal, then another modal opened from ckeditor5 (AI ckeditor5 integration) causes a problem = closing that modal will close all modals. (Uncaught TypeError: dialogSettings is undefined)
Also tried with patch #142 and #134 and they do not fix this issue

Re-roll patch 142

We have another important case that needs to be addressed in this issue. The case involves using a media library widget within a media library widget. When we open a media library from another media library, it replaces the previous one and closes both upon submitting the child media library. For example, in the remote video media form, we added a cover image field with a media library widget. When we click to add media for the cover image, the new media library will replace the old one and will now submit or save or add the remote video or the cover image.

Facing issue with AI ckeditor5 integration too.

Attached a static drupal-core--2025-02-06--2741877--mr-11137.patch file from this point of MR11137
witch applies to both Drupal 10.4.x
To be used with Composer Patches

The patch in #149 applies and works as expected for me in drupal 10.4
thanks!

Attached a static drupal-core--2025-02-16--2741877--mr-11137.patch file
from this point of MR11137
witch applies to Drupal 10.4.x
To be used with Composer Patches

The issue from #146 is resolved in this patch, which applies to Drupal 10.2.x.

If you are using media_library_extend, apply this patch: https://www.drupal.org/project/media_library_extend/issues/3507967 ✨ Nested media library Active .
If you are using media_library_form_element, apply this patch: https://www.drupal.org/project/media_library_form_element/issues/3507968 ✨ Nested media library Active .

The Needs Review Queue Bot → tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

nod_ → changed the visibility of the branch 2741877-10-4-x to hidden.

nod_ → changed the visibility of the branch 2741877-nested-modals-10.2 to hidden.

nod_ → changed the visibility of the branch 2741877-nested-modals-10.3 to hidden.

nod_ → changed the visibility of the branch 2741877-nested-modals-10.1 to hidden.

let's worry about 11.x first and we'll handle the backports once it's RTBC/committed