Libraries using jquery_ui assets directly shouldn't duplicate files

Created on 22 August 2023, over 1 year ago
Updated 14 September 2023, over 1 year ago

Problem/Motivation

In #3113400: Deprecate more jQuery UI library definitions we incorporated several jquery ui libraries directly into the core libraries that depended on them, in order to be able to deprecate the jquery_ui libraries in the expectation that it will eventually go out of support.

However, in doing so we duplicated several files between the library definitions, especially CSS.

Drupal's asset system successfully prevents addition of duplicate libraries, but not duplicate files, so this breaks.

🐛 claro.jquery.ui css assets may be added the page multiple times Fixed is one.

Bug report via @acbramley in slack:

Having a strange issue that I can reproduce on a vanilla install:
Install standard profile, layout_builder_modal, linkit, and ckeditor (for CKE4).
Enable Layout builder for Articles, change the Basic HTML text format to use CKE4 and enable linkit using the default profile.
Add a node and edit the layout, create a custom block which launches a modal for creating a Basic block
Click the link button which launches the Linkit dialog.
We now have 2 .ui-widget-overlay divs, when closing the linkit dialog, the first overlay remains but overlays the block form so nothing is clickable.
This worked completely fine on 10.0

Steps to reproduce

  1. Install standard profile, layout_builder_modal, linkit, and ckeditor (for CKE4).
  2. Enable Layout builder for Articles, change the Basic HTML text format to use CKE4 and enable linkit using the default profile.
  3. Add a node and edit the layout, create a custom block which launches a modal for creating a Basic block
  4. Click the link button which launches the Linkit dialog.
  5. Close the linkit dialog
  6. Notice the widget overlay is covering the entire screen making it un-interactable

The bug is due to assets/vendor/jquery.ui/themes/base/core.css being added twice, causing the z-index style for .ui-dialog:

.ui-dialog { z-index: var(--jui-dialog-z-index);}

to be overridden with the z-index for ui.front

.ui-front { z-index: 100 }

Meaning the block's modal dialog is hidden behind the overlay making it uninteractable.

Proposed resolution

I think we need to essentially revert the original patch, moving the jquery_ui libraries out to separate definitions that core can rely on, but name them as we did with underscore like core/internal.jquery_ui.widgets or similar to discourage them from being used in contrib.

Where contrib actually is already using those libraries, they'd then be able to switch to those core internal libraries too preventing the same bug there, but on the basis that it's all subject to change.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

🐛 Bug report
Status

Fixed

Version

10.1

Component
Javascript 

Last updated 1 day ago

Created by

🇬🇧United Kingdom catch

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

Comments & Activities

Production build 0.71.5 2024