Problem/Motivation

When there is a single media item thumbnail, attempting to drag that thumbnail causes a JavaScript error:

media_library.widget.js?v=9.5.0:17 Uncaught TypeError: Cannot set properties of undefined (setting 'value')
    at HTMLDivElement.<anonymous> (media_library.widget.js?v=9.5.0:17:71)
    at Function.each (jquery.min.js?v=3.6.2:2:3003)
    at E.fn.init.each (jquery.min.js?v=3.6.2:2:1481)
    at Bt.onEnd (media_library.widget.js?v=9.5.0:16:34)
    at W (Sortable.min.js?v=1.15.0:2:11012)
    at U (Sortable.min.js?v=1.15.0:2:11592)
    at Bt._onDrop (Sortable.min.js?v=1.15.0:2:28869)
(anonymous) @ media_library.widget.js?v=9.5.0:17
each @ jquery.min.js?v=3.6.2:2
each @ jquery.min.js?v=3.6.2:2
onEnd @ media_library.widget.js?v=9.5.0:16
W @ Sortable.min.js?v=1.15.0:2
U @ Sortable.min.js?v=1.15.0:2
_onDrop @ Sortable.min.js?v=1.15.0:2

On some Android phones in some versions of Chrome and Firefox, this freezes the browser. You can no longer scroll up and down on the page. You can interact with text fields that are currently visible, but that's it. You need to tap the URL in the location bar and reload the page.

My browser is Chrome 108 on Android 13 on a Pixel 6:
https://whatismybrowser.com/w/PJHS89R

This does not happen on an iPhone in Chrome (or in Safari).

Steps to reproduce

  1. Create a content type with a Media image field, setting the Form Display of that field to use the "Media Library" widget.
  2. Create a node of that content type with 1 image media item.
  3. Go to the edit form.
  4. Click on the thumbnail (see screenshot) of the image media item and drag it.
  5. See JavaScript error in console log. On some Android phones, see that the browser basically freezes.

Screenshot of node edit page

I confirmed this on a core-only install of Drupal 9.4.9 on simplytest.me. You can see it here until it goes away:

Username / password: admin / admin
https://master-ud8vbaylkh6cdxhro6uqbh33z7z4suuk.tugboatqa.com/node/1/edit

I created a short video of the issue here where (1) I scroll up and down successfully, (2) click the thumbnail, (3) try to scroll, but can't, (4) click a text field to give it focus and still fail to scroll, (5) click outside the text field to remove focus and still fail to scroll:

https://photos.google.com/share/AF1QipMPBJXWaWRDfb0VPBdCPZhP2p4JijZg8odp...

Proposed resolution

Dragging a thumbnail image should cause JavaScript errors or freeze the browser.

Remaining tasks

  1. Diagnose issue.
  2. Patch code.
  3. Commit to core.
CommentFileSizeAuthor
#20 interdiff-17_20.txt747 bytesgauravvvv
#20 3327234-20.patch765 bytesgauravvvv
#18 3327234-nr-bot.txt1.4 KBneeds-review-queue-bot
#17 3327234-17.patch742 bytesvolkerk
#13 3327234-13.drag-single-media-item.patch1.41 KBjrb
#7 Screenshot_20221215-142041.png118.5 KBjrb

Comments

jrb created an issue. See original summary.

seanpb’s picture

seanpb commented

I also see this same issue on mobile chrome on android, right after tapping on the thumbnail image. On mobile firefox, the same thing happens, not on tap, but on tap, hold, and drag.

FF: https://whatismybrowser.com/w/B34ZRTY
Chrome: https://whatismybrowser.com/w/67GAR74

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented
Issue summary: View changes
cilefen’s picture

cilefen commented

Could someone get the browser console logs please?

In which specific version of Drupal did this break?

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented

In which specific version of Drupal did this break?

The simplytest.me site is Drupal 9.4.9. It does the same on 9.4.8.

ameer khan’s picture

ameer khan commented

I test with an older version of android & chrome. Unable to reproduce the issue. I can tab the media, hold & download, and also able to remove the media.

https://www.whatismybrowser.com/w/FPX8YJK

Then I updated the chrome to latest version (108) but still not able to reproduce. Not freezing.

https://www.whatismybrowser.com/w/999HGD8

Drupal version: 9.4.9

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented
Issue summary: View changes
StatusFileSize
new Screenshot_20221215-142041.png118.5 KB

I added screenshot and a short video showing the bug to the description.

New simplytest.me (Drupal 9.5.0) here:

Username / password: admin / admin
https://master-ud8vbaylkh6cdxhro6uqbh33z7z4suuk.tugboatqa.com/node/1/edit

Several people including a client have seen this. One other person with an older phone did not see this problem. Their phone:

Chrome 93 on Android (Pie) - Motorola Moto G Moto G moto g(6)
https://whatismybrowser.com/w/DG7GYH8

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented

Just did the debugging via USB on my phone and got this JavaScript error in the logs:

media_library.widget.js?v=9.5.0:17 Uncaught TypeError: Cannot set properties of undefined (setting 'value')
    at HTMLDivElement.<anonymous> (media_library.widget.js?v=9.5.0:17:71)
    at Function.each (jquery.min.js?v=3.6.2:2:3003)
    at E.fn.init.each (jquery.min.js?v=3.6.2:2:1481)
    at Bt.onEnd (media_library.widget.js?v=9.5.0:16:34)
    at W (Sortable.min.js?v=1.15.0:2:11012)
    at U (Sortable.min.js?v=1.15.0:2:11592)
    at Bt._onDrop (Sortable.min.js?v=1.15.0:2:28869)
(anonymous) @ media_library.widget.js?v=9.5.0:17
each @ jquery.min.js?v=3.6.2:2
each @ jquery.min.js?v=3.6.2:2
onEnd @ media_library.widget.js?v=9.5.0:16
W @ Sortable.min.js?v=1.15.0:2
U @ Sortable.min.js?v=1.15.0:2
_onDrop @ Sortable.min.js?v=1.15.0:2

The error is at the $(child).find() line of this code in media_library.widget.js:

  Drupal.behaviors.MediaLibraryWidgetSortable = {
    attach: function attach(context) {
      var selection = context.querySelectorAll('.js-media-library-selection');
      selection.forEach(function (widget) {
        Sortable.create(widget, {
          draggable: '.js-media-library-item',
          handle: '.js-media-library-item-preview',
          onEnd: function onEnd() {
            $(widget).children().each(function (index, child) {
              $(child).find('.js-media-library-item-weight')[0].value = index;
            });
          }
        });
      });
    }
  };
jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented

Here's the markup for div.js-media-library-selection. It looks like the problem is that the find(.'js-media-library-item-weight') returns nothing, probably because there's only 1 media item.

<div class="js-media-library-selection js-form-wrapper form-wrapper media-library-selection"
     data-drupal-selector="edit-field-media-image-selection" id="edit-field-media-image-selection">
    <div class="js-media-library-item media-library-item media-library-item--grid" tabindex="-1"
         data-media-library-item-delta="0" data-drupal-selector="edit-field-media-image-selection-0" draggable="false">
        <input aria-label="Remove imagefield_67jhg45.png"
               data-drupal-selector="edit-field-media-image-selection-0-remove-button" formnovalidate="formnovalidate"
               class="media-library-item__remove icon-link button js-form-submit form-submit" type="submit"
               id="edit-field-media-image-selection-0-remove-button"
               name="field_media_image-0-media-library-remove-button" value="Remove" data-once="drupal-ajax">
        <article data-drupal-selector="edit-field-media-image-selection-0-rendered-entity"
                 class="contextual-region media-library-item__preview-wrapper">
            <div class="media-library-item__preview js-media-library-item-preview">
                <div class="field field--name-thumbnail field--type-image field--label-hidden field__item">
                    <img loading="lazy"
                        src="/sites/default/files/styles/medium/public/2022-12/imagefield_67jhg45.png?itok=-ppm59HM"
                        width="220" height="103" alt="Test image" class="image-style-medium" draggable="false">
                </div>
            </div>
            <div class="media-library-item__attributes">
                <div class="media-library-item__name">
                    imagefield_67jhg45.png
                </div>
            </div>
        </article>
        <input data-drupal-selector="edit-field-media-image-selection-0-target-id" type="hidden"
               name="field_media_image[selection][0][target_id]" value="1">
    </div>
</div>
jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented

Yeah, if I change the cardinality of the media image field to 2 and select 2 items, there are no problems with clicking on the image thumbnails. The div.js-media-library-selection now includes two input.js-media-library-item-weight elements.

I'm not sure which is the proper solution?

  1. Fix the Drupal.behaviors.MediaLibraryWidgetSortable JS to not run or break when there's only 1 item.
  2. Not include media_library.widget.js if there's only 1 item. This is probably not it because that code also includes Drupal.behaviors.MediaLibraryWidgetDisableButton.
<div class="js-media-library-selection js-form-wrapper form-wrapper media-library-selection"
     data-drupal-selector="edit-field-media-image-selection" id="edit-field-media-image-selection--gHMuPP7uWtw">
    <div class="js-media-library-item media-library-item media-library-item--grid" tabindex="-1"
         data-media-library-item-delta="0" data-drupal-selector="edit-field-media-image-selection-0" draggable="false">
        <input aria-label="Remove imagefield_67jhg45.png"
               data-drupal-selector="edit-field-media-image-selection-0-remove-button" formnovalidate="formnovalidate"
               class="media-library-item__remove icon-link button js-form-submit form-submit" type="submit"
               id="edit-field-media-image-selection-0-remove-button--eQ3b9c1tpm0"
               name="field_media_image-0-media-library-remove-button" value="Remove" data-once="drupal-ajax">
        <article data-drupal-selector="edit-field-media-image-selection-0-rendered-entity"
                 class="contextual-region media-library-item__preview-wrapper">
            <div class="media-library-item__preview js-media-library-item-preview">
                <div class="field field--name-thumbnail field--type-image field--label-hidden field__item"><img
                        loading="lazy"
                        src="/sites/default/files/styles/medium/public/2022-12/imagefield_67jhg45.png?itok=-ppm59HM"
                        width="220" height="103" alt="Test image" class="image-style-medium" draggable="false">
                </div>
            </div>
            <div class="media-library-item__attributes">
                <div class="media-library-item__name">
                    imagefield_67jhg45.png
                </div>
            </div>
        </article>
        <input data-drupal-selector="edit-field-media-image-selection-0-target-id" type="hidden"
               name="field_media_image[selection][0][target_id]" value="1">
        <div class="js-form-item form-item js-form-type-number form-type--number js-form-item-field-media-image-selection-0-weight form-item--field-media-image-selection-0-weight"
             style="display: none;">
            <label for="edit-field-media-image-selection-0-weight--Wrr2O-3kqR4" class="form-item__label">Weight</label>
            <input class="js-media-library-item-weight form-number form-element form-element--type-number form-element--api-number"
                   data-drupal-selector="edit-field-media-image-selection-0-weight" type="number"
                   id="edit-field-media-image-selection-0-weight--Wrr2O-3kqR4"
                   name="field_media_image[selection][0][weight]" value="0" step="1" data-once="media-library-toggle">
        </div>
    </div>
    <div class="js-media-library-item media-library-item media-library-item--grid" tabindex="-1"
         data-media-library-item-delta="1" data-drupal-selector="edit-field-media-image-selection-1" draggable="false">
        <input aria-label="Remove imagefield_67jhg45.png"
               data-drupal-selector="edit-field-media-image-selection-1-remove-button" formnovalidate="formnovalidate"
               class="media-library-item__remove icon-link button js-form-submit form-submit" type="submit"
               id="edit-field-media-image-selection-1-remove-button--JrNjQZLEwko"
               name="field_media_image-1-media-library-remove-button" value="Remove" data-once="drupal-ajax">
        <article data-drupal-selector="edit-field-media-image-selection-1-rendered-entity"
                 class="contextual-region media-library-item__preview-wrapper">
            <div class="media-library-item__preview js-media-library-item-preview">

                <div class="field field--name-thumbnail field--type-image field--label-hidden field__item"><img
                        loading="lazy"
                        src="/sites/default/files/styles/medium/public/2022-12/imagefield_67jhg45.png?itok=-ppm59HM"
                        width="220" height="103" alt="Test image" class="image-style-medium" draggable="false">
                </div>
            </div>
            <div class="media-library-item__attributes">
                <div class="media-library-item__name">
                    imagefield_67jhg45.png
                </div>
            </div>
        </article>
        <input data-drupal-selector="edit-field-media-image-selection-1-target-id" type="hidden"
               name="field_media_image[selection][1][target_id]" value="1">
        <div class="js-form-item form-item js-form-type-number form-type--number js-form-item-field-media-image-selection-1-weight form-item--field-media-image-selection-1-weight"
             style="display: none;">
            <label for="edit-field-media-image-selection-1-weight--be8NOFGNb5k" class="form-item__label">Weight</label>
            <input class="js-media-library-item-weight form-number form-element form-element--type-number form-element--api-number"
                   data-drupal-selector="edit-field-media-image-selection-1-weight" type="number"
                   id="edit-field-media-image-selection-1-weight--be8NOFGNb5k"
                   name="field_media_image[selection][1][weight]" value="1" step="1" data-once="media-library-toggle">
        </div>
    </div>
</div>
jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented

So, now that I know what it is, I am able to recreate the issue on desktop by dragging the thumbnail rather than just clicking it. It doesn't lock up the screen the way it does on some phones, but it does throw the JavaScript error.

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented
Title: Clicking on media thumbnail on edit page freezes browser on Android phones » Dragging single media thumbnail on edit page causes JavaScript error
Version: 9.4.x-dev » 9.5.x-dev
Issue summary: View changes

Updated issue title and description now that the problem is better understood.

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented
Status: Active » Needs review
StatusFileSize
new 3327234-13.drag-single-media-item.patch1.41 KB

Attached is a patch that fixes this issue by not setting up Sortable drag-and-drop if there's only 1 item.

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented
Related issues: +#3102402: Remove weight field from Media Library widget when only single media can be attached

This issue was caused by the changes in #3102402: Remove weight field from Media Library widget when only single media can be attached.

Status: Needs review » Needs work

The last submitted patch, 13: 3327234-13.drag-single-media-item.patch, failed testing. View results

cilefen’s picture

cilefen commented
Issue tags: +JavaScript
volkerk’s picture

volkerk commented
Version: 9.5.x-dev » 10.1.x-dev
Status: Needs work » Needs review
StatusFileSize
new 3327234-17.patch742 bytes

Drupal 10 version of the patch.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3327234-nr-bot.txt1.4 KB

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Yogesh Sahu’s picture

Yogesh Sahu commented
Assigned: Unassigned » Yogesh Sahu
gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
StatusFileSize
new 3327234-20.patch765 bytes
new interdiff-17_20.txt747 bytes

Fixed custom commands failed, Attached interdiff for same

Yogesh Sahu’s picture

Yogesh Sahu commented
Assigned: Yogesh Sahu » Unassigned
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative, +Needs tests

Can confirm the issue in D10.1

Next steps would be to write a test case showing the issue.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

jrb’s picture

jrb
he/him
Primary language English
Location Raleigh-Durham Area, NC, USA
commented
Issue summary: View changes

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.