WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 weeks ago

#34788 closed defect (bug) (worksforme)

Media Uploader - media items unclickable after upload

Reported by: DoodleDogCody Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.3.1
Component: Media Keywords: reporter-feedback
Focuses: javascript Cc:
PR Number:

Description

When uploading media to the media uploader the uploader can become unresponsive to user clicks after dragging and dropping media items into the uploader.

To Reproduce. Go to any post type and click the add media button. From there drag and drop multiple images on to the uploader at once. As soon as you drop the images click anywhere on the uploader.

The uploads still occur you can just no longer click on any of them or anywhere on the screen. This doesn't seem to happen consistently and seems to have to do with the timing of when the images are dropped and when the user clicks on the screen again.

After the UI "Freeze" occurred I inspected the DOM in the console and noticed that the '.uploader-window' div is still active. Glancing at the code in media-view.js it looks like this div is supposed to be removed after dropping media files.

I conclude that dropping and clicking the div before it is removed keeps it active above the rest of the UI.

Change History (6)

#1 follow-up: @joemcgill
3 years ago

  • Keywords reporter-feedback close added

This doesn't seem to still be an issue in v4.5. @DoodleDogCody can you confirm whether this is still an issue?

#2 in reply to: ↑ 1 @DoodleDogCody
3 years ago

@joemcgill I have ran into this problem recently but I am not sure if it was on a site running 4.5 or a version prior. However I have no idea what causes it. I thought it had something to do with clicking somewhere before the uploader has captured the drop of the images but I can't consistently replicate the issue. So I am really not sure.

#3 @joemcgill
3 years ago

  • Milestone Awaiting Review deleted

Thanks for the quick feedback @DoodleDogCody. I'll leave this open and see if you or anyone else can come up with steps to reproduce. If you are able to reproduce, it would be helpful to see if it affects multiple browsers or only a few.

#4 @DoodleDogCody
3 years ago

Just had this happen again.

Here is some documentation on what happened.

From the Edit Page screen I did the following

  • Click Add Featured Image
  • Drag and dropped images from my finder window onto the browser

Once uploaded the ".uploader-window" div still has display:block added to it through javascript so there is a transparent div untop of everything and I cannot click anywhere.

I am using a MacBook pro running the latest version of Firefox.
I also uploaded from the Media Library tab instead of the Upload Files tab. This may be relevant because none of the previous uploaded images were showing yet on this tab when I dropped the new images on the screen. I haven't dug through the code or not but I suspect that whatever javascript pulls in all the current thumbnails is stopping the uploader javascript that would set the "div.uploader-window" back to display none.

Below is link to a screenshot with firebug open to show the problem
https://gyazo.com/2a6455a54ffe04321f1facbdd140e667

#5 @netweb
3 years ago

  • Keywords reporter-feedback removed
  • Milestone set to Awaiting Review

#6 @desrosj
3 weeks ago

  • Keywords reporter-feedback added; close removed
  • Resolution set to worksforme
  • Status changed from new to closed

I just did some testing on 5.2.4, and I have been unable to reproduce this behavior using the block editor or the Classic Editor.

Sorry that this one fell between the cracks, @DoodleDogCody. I am going to close this one out because it works for me, but if you are still experiencing the issue in the latest version of WordPress, please feel free to reopen with more details.

Note: See TracTickets for help on using tickets.