Problem/Motivation

The commit applied in #3371179: Overlay blocking image upload modal in Drupal 10.1 was not correct. The core/jquery.ui and associated libraries were deprecated in Drupal 9.2 and were removed in Drupal 10.

It only works in many scenarios because of happy accidents:

1) Drupal allows a library dependency on a non-existent library to silently fail.
2) Core's copy of the jQuery UI assets is still around. These files are direct assets of certain drupal.* libraries that have still not been decoupled from jQuery UI in Drupal 10. drupal.dialog is the one place in core.libraries.yml that still includes the jQuery UI "Draggable" library.

Presumably, many of us are working on sites that just so happen to include elements attaching the drupal.dialog library on pages that use the media library widget. But this is not guaranteed and should not be counted on.

Steps to reproduce

  1. On a Drupal 10.1 site, install the latest Focal Point and configure the default form display for an image-based media type to use the focal point widget. Upload an image as this media type.
  2. Because drupal.dialog is a very common library to include, it might be hard to prevent the entire library from being attached for reproduction. I think it's easier to reproduce by removing just the draggable asset file from the drupal.dialog library. Add the following custom hook to an enabled module:
    function hook_library_info_alter(&$libraries, $extension) {
      if ($extension === 'core') {
      unset($libraries['drupal.dialog']['js']['assets/vendor/jquery.ui/ui/widgets/draggable-min.js']);
      }
    }
    
  3. Go to edit the media image. Note the JavaScript console error "this.$indicator.draggable is not a function" and how the focal point indicator is not funtional.

Proposed resolution

In the short term, if Focal Point is going to work around this by depending on the drupal.dialog library, it should depend on the drupal.dialog library.

A true long term resolution still depends on a resolution in jquery_ui (or possibly in Core). The root problem is still that described in #3371462: Module defines jQuery UI files independently from Core. Can cause CSS priority issues in AJAX calls

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:

Comments

bvoynick created an issue. See original summary.

bvoynick’s picture

Issue summary: View changes

bvoynick’s picture

Status: Active » Needs review

Opened MR 18 implementing proposed short term fix.

bvoynick’s picture

Priority: Normal » Major

Going to bump Priority to Major, since this is still as severe as #3371179: Overlay blocking image upload modal in Drupal 10.1, it just probably affects fewer people.

pcate’s picture

Status: Needs review » Reviewed & tested by the community

I can confirm this issue after upgrading to the module version 2.1 when on Drupal 10.1. MR resolves the issue.

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

rajeshreeputra’s picture

Status: Reviewed & tested by the community » Fixed

merged and released, thank you!

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

kazajhodo’s picture

It looks like this issue has returned in 9.5.10.

Within focal_point.libraries, replacing '- core/drupal.dialog' with '- core/jquery.ui.dialog' resolves the issue.

I pushed a commit to the issue branch.

aimevp’s picture

If Focal Point is no longer depending on the contrib module jquery_ui and jquery_ui_draggable, shouldn't this fix have included the removal of the dependencies in the composer.json file as well then?

kazajhodo’s picture

@aimevp, I think that makes sense. The only place in the code that jquery_ui is found, is the comment within focal_point.libraries.

Throw a commit at the fork quick.

kazajhodo’s picture

Patch for the meantime.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

lexfunk’s picture

I opened a separate issue to hopefully get the patch from #14 committed https://www.drupal.org/project/focal_point/issues/3401706.