Media Library modale window covered by black overlay after using pager or search

Created on 18 January 2024, 11 months ago
Updated 22 January 2024, 11 months ago

Problem/Motivation

When using the Media Library modal window on an entity edit page and using the pager or applying a search, a black overlay is placed over the page and stays across the screen, making the page unusable.

Steps to reproduce

- Edit a node
- Open a Media Library modal through a reference field or the CK Editor
- Use the pager or apply a search with the modal
- Black overlay covers page making it unusable

Is anyone able to replicate this issue? Happy to provide any other details of my setup that may be relevant.

This is happening to me on all instances I have tested, nodes, config pages etc.

Thanks

πŸ› Bug report
Status

Closed: duplicate

Version

10.2 ✨

Component
MediaΒ  β†’

Last updated about 2 hours ago

Created by

πŸ‡¨πŸ‡¦Canada lindsay.wils

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @lindsay.wils
  • πŸ‡ΊπŸ‡ΈUnited States sean_fremouw

    I have almost identical experience. However, I only experience in reference fields. Media Library via CKEditor (v4) works fine. In fact, if I first use Media Library within CKEditor and then use Medial Library for a reference field it now works fine. I do not have to actually select the media item -- just use the pager or search.

    Noting this related issue in Field Group ( https://www.drupal.org/project/field_group/issues/3415633 πŸ› Drupal.FieldGroup is undefined when using Media Library modal Active ) but agree with lindsay.wils that the error thrown is a red herring. The error discussed in that item is thrown for me in all use cases -- CKEditor or reference field as well as black overlay getting stuck or not.

  • A screenshot would be nice.

  • πŸ‡«πŸ‡·France GPZ

    I have the same issue.
    see before and after screenshots.
    I'm using Drupal 10.2.1 but still using the module contrib seven for the BO theme.
    The problem seems to be the css order
    At first ".ui-dialog" from seven override .ui-front from core jquery.ui (important part is the z-index: 1260 from ui-dialog and 100 for the other one.
    but once you click on the pager the order is reversed and .ui-front overrides .ui-dialog and the final z-index is 100 while ui-widget-overlay (the black overlay that should be behind the dialog) is 1259

    I've tried with claro and the problem doesn't appear but that's because the .ui-dialog from theme seems to appear twice. One after the core.css and one before (see screenshot). It seems to add more claro/css/components/jquery.ui/theme.css after each pager usage. My claro theme is not full working so, I'm not sure if this is revelant

  • πŸ‡«πŸ‡·France GPZ

    I've found this core patch:
    https://www.drupal.org/project/drupal/issues/3399951 πŸ› ajax_page_state leaks through request in Views Ajax Needs work
    and it fixes the issues for me (both overlay and JS added to DOM at each Ajax request)

  • Status changed to Closed: duplicate 11 months ago
  • Thank you for that update!

  • πŸ‡ΊπŸ‡ΈUnited States sean_fremouw

    Patch mentioned by GPZ in comment #5 fixed issue for me as well.

  • πŸ‡¨πŸ‡¦Canada lindsay.wils

    Thank you everyone for the responses, fix mentioned in #5 works for me too.

Production build 0.71.5 2024