z-index problem with media library widget

Created on 14 September 2023, over 1 year ago
Updated 17 September 2023, over 1 year ago

Problem/Motivation

There is a z-index issue with the media library widget, but only after uploading a new file.

When opening the widget, it initially works as expected:

Before the upload the Media library widget's z-index'es are

2) 1260 from /core/themes/claro/css/components/jquery.ui/theme.css
1) 100 from /core/assets/vendor/jquery.ui/themes/base/core.css

After choosing "add file" in the modal window, uploading a new file and selecting the newly created media entity, I'm returning to the screen above, but this time the greyish curtain is in front of the media modal:

After the upload the z-index'es are

3) 100 from core/assets/vendor/jquery.ui/themes/base/core.css
2) 1260 from /core/themes/claro/css/components/jquery.ui/theme.css
1) 100 from /core/assets/vendor/jquery.ui/themes/base/core.css

I don't know why, but the same "base" CSS file was injected again quite at the end of the HTML < head > and overrides the "components" CSS file. I can reliably reproduce this error on a taxonomy term form, but it did not happen for me on node forms.

🐛 Bug report
Status

Closed: works as designed

Component

User interface

Created by

🇦🇹Austria hudri Austria

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

Comments & Activities

  • Issue created by @hudri
  • 🇦🇹Austria hudri Austria
  • 🇦🇹Austria hudri Austria

    I've been digging:

    core.libraries.yml

    drupal.autocomplete:
      css:
        component:
          assets/vendor/jquery.ui/themes/base/core.css: { weight: -11.8 }
    drupal.dialog:
      css:
        component:
          assets/vendor/jquery.ui/themes/base/core.css: { weight: -11.8 }
    1. My taxonomy term pages load with dialog, but without autocomplete.
    2. Pressing the upload button triggers an Ajax request, the the autocomplete library is added.
    3. The Ajax request from the autocomplete library attaches the same base CSS file again, but at the very end of the page, bypassing the weight of the files.

    This seems to be a reproduceable core bug. Drupal can prevent the double loading of libraries, but it can not prevent two libs from loading the same file.

    When two libs load the same file, and one of them is an ajax requests, this totally bypasses all ordering from weights and SMACSS layers. IMHO core should refactor the remaining jQuery libs: Move shared files into a separate library, and then both dialog and autocomplete must depend on the new shared lib.

    Move ticket to core project?

  • 🇦🇹Austria hudri Austria
  • Status changed to Postponed over 1 year ago
  • 🇦🇹Austria hudri Austria

    Found the corresponding core issue. Postponded because merging #3382447 should fix this.

  • Status changed to Closed: works as designed over 1 year ago
  • 🇨🇭Switzerland saschaeggi Zurich

    @hudri closing as works as designed as 🐛 Libraries using jquery_ui assets directly shouldn't duplicate files Fixed has been merged and it was a core issue.

Production build 0.71.5 2024