Issue Summary

The original 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.

This module had an issue where opening the edit modal via the edit button created a conflict due to the media field's presence of another edit button. Opening a second modal replaced the first because both used the same selector, "#drupal-modal".

Proposed resolution

  • Manage nested modals of the same type, like opening one media library within another.

Important note

This is a core issue, so we need to apply patch #156 from the following issue: https://www.drupal.org/project/drupal/issues/2741877.

CommentFileSizeAuthor
#3 nested-modals-3561003-3.patch1.36 KBabu-zakham
nested-modals-1.patch1.42 KBmutasim al-shoura

Issue fork media_library_edit-3561003

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:

About issue forks

Comments

mutasim al-shoura created an issue. See original summary.

mutasim al-shoura’s picture

mutasim al-shoura commented
Title: Nested media library » Nested modals
abu-zakham’s picture

abu-zakham commented
StatusFileSize
new nested-modals-3561003-3.patch1.36 KB

abu-zakham opened merge request !29

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

hanoii opened merge request !31

hanoii’s picture

hanoii
Primary language Spanish
Location 🇦🇷UTC-3
commented
Status: Active » Needs review

Opened MR !31 as an alternative to !29. Main differences: the current core MR for #2741877 doesn't read data-dialog-options['selector'] - the dialog id comes from $main_content['#modal_selector'] - so with !29 the modal element keeps its default id and CloseDialogCommand("#edit-modal-…") no longer closes it on save. !31 uses #modal_selector, keeps a fallback selector so unpatched core behaves as before, and also fixes "Insert selected" being broken on media library widgets inside the edit modal (media_library_edit_form_alter() currently alters every form built during the request). Details, reproduction steps and testing notes in the MR description.

hanoii’s picture

hanoii
Primary language Spanish
Location 🇦🇷UTC-3
commented

Pushed two more fixes to the MR branch on top of the form_alter scoping:

- Save replaced the wrong preview: the shared `.selected-media` selector
matched multiple items, so editing an inner media overwrote the outer
widget's preview. Now scoped per media id
(`data-media-library-edit-id` on the link, id based marker class, id
scoped `ReplaceCommand`).
- Validation messages and save messages leaked: errors hit every `form`
on the page, and the save confirmation lingered in the session and
popped up on the next page load. Errors now target the form's
`data-drupal-selector`, and queued messages are delivered via
`MessageCommand` then drained.

Full rundown is in the MR description. Nested show to episode to
thumbnail edits now replace the right preview and report status
correctly. Please re-test.

hanoii changed the visibility of the branch 3.0.x to hidden.

hanoii changed the visibility of the branch 3561003-nested-modals to hidden.

hanoii’s picture

hanoii
Primary language Spanish
Location 🇦🇷UTC-3
commented

My MR now fixes many other issues related to nested modals, so hiding the rest to keep the issue clean.