Entering single quotes in Add Media dialog after recropping causes browser to hang

[andfinally]

To reproduce

• Create a draft and insert an image into the content.
• In the Visual editor, click on the image to get the tooltip image edit menu, then on the pencil icon to edit the image.
• In the Image Details dialog click the "Edit Original" button to edit the image.
• In the Edit Image dialog, click and drag on the image to create a cropping zone.
• Click the crop icon in top left above the image to crop it.
• Click the "Save" button below the image to save the crop.
• Back on the Image Details dialog, try to enter several single quotes in the Alternative Text input. Tap your single quote key six or seven times.

What I expect to see

• I am able to continue entering text in the image dialog inputs, even if I'm prevented from entering a single quote.

What I see instead

• I am unable to enter any text in any of the dialog's inputs.
• In most cases the page seems to lock for some time - I'm unable to interact with it at all: I can't refresh or close it normally. The Chrome task manager shows 101% CPU usage for the tab.
• There are no JS errors in the console, and no requests in the network tab.
• On some occasions, after leaving the page for several minutes, it eventually unlocks by itself, and some of the characters I typed in my earlier attempt to enter text are output wherever I happen to have my cursor.

Notes

It looks like some piece of JS is somehow capturing the keypresses in the Alternative Text input.

This was reproduced in macOS and Windows Chrome 64 and macOS Chromium 62 (the Chromium with no browser extensions) on a fresh checkout of WordPress v4.9.4. It doesn't happen in FF55.

[anamoresby]

Hi,

After several tests following a VIP client report, we have found that this issue happens both in Mac and Windows, but only under a Chrome browser and after image cropping. Also, we've been able to reproduce it in a non-dotcom site to ensure it is a core issue.

Hope this info is useful!

[andfinally]

Thanks @anamoresby it is useful!

[antonioromano]

Hi guys,
any plan to deploy a patch for this with one of the next wp core releases?

Best,
Antonio

[jtroynousky]

Hi all, has any progress been made on this one? From what I can tell, at least one of the issues is that the ImgAreaSelect plugin the image crop tool uses is binding an event on "keypress" in Chrome when it should be using "keydown".

If there hasn't been any movement on this, I can submit a patch.

[andfinally]

Howdy John! 👋 It seems this hasn't even been triaged – I presume people have been concentrating more on the block editor. I'm not familiar with the procedure for progressing these Tracs, but it may help if we can attach a patch to this one.

[jtroynousky]

@andfinally Hey mate! I've just attached a patch for this. The imgAreaSelect plugin hasn't been updated in 7+ years, so I figured a patch in the /vendor/ directory would be appropriate here.

[andfinally]

Thanks John, this fixes it for me. I actually have no idea how to go about getting this into core – it may be deemed less urgent since this doesn't happen in the block editor, but this bug would affect any other component that uses this plugin. I'll try find out.

[andfinally]

Actually, I'm seeing this issue in macOS FF 72 as well, even with this patch. When you try to type in a single quote in the Alternative Text input no character appears, and successive attempts cause the page to freeze for a time.

I think we may struggle to get a fix into core, given that this only affects older versions of the editor.

[jtroynousky]

Thanks @andfinally! I have another potential fix, but I'll have our QA team have a look and test across all browsers before I upload a new patch. Stay tuned!