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
- Create a content type with a Media image field, setting the Form Display of that field to use the "Media Library" widget.
- Create a node of that content type with 1 image media item.
- Go to the edit form.
- Click on the thumbnail (see screenshot) of the image media item and drag it.
- See JavaScript error in console log. On some Android phones, see that the browser basically freezes.
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
- Patch code.
- Commit to core.