WordPress.org

Make WordPress Core

Opened 14 months ago

Last modified 3 months ago

#44820 new defect (bug)

CodeMirror in Customize - copy & paste bug

Reported by: dionysous Owned by:
Milestone: Future Release Priority: normal
Severity: minor Version: 4.9
Component: Customize Keywords: has-patch needs-testing
Focuses: ui, javascript, administration Cc:
PR Number:

Description

Wrong behavior in CodeMirror:
I go to Customize > Additional CSS and copy one selector including the opening curly bracket "{". I paste the copied text at the end of the content of the CSS textarea and press enter to create a new line. The new line won't be created, instead Autocompletion of CodeMirror is executed and the CSS attribute align-content is added.

Animated screen capture as GIF:
https://hipp.design/media/code-mirror-copy-paste.gif

It only happens, when the selector is pasted at the end (of the textarea) and if the CSS field was already filled out and the Customize have been saved before.

Attachments (2)

44820.diff (633 bytes) - added by pento 3 months ago.
44820.2.diff (1.3 KB) - added by pento 3 months ago.

Download all attachments as: .zip

Change History (6)

#1 @dlh
14 months ago

  • Version changed from 4.9.8 to 4.9

#2 @SergeyBiryukov
13 months ago

  • Keywords reporter-feedback added

Hi @dionysous, welcome to WordPress Trac! Thanks for the report.

I could not reproduce the issue on a clean install with Opera 55 (Windows 10).

  1. Does it happen in CodeMirror demos on https://codemirror.net?
  2. Which browser are you using?

#3 @dionysous
13 months ago

Hello @SergeyBiryukov ,

thank you for trying. Try copying this CSS code:

.class .class-2 #id-here {

}

...and save the Customize options then. Reload the Customize.
Paste only this after the saved CSS code:

.class .class-2 #id-here {

The cursor/focus should be after the openin {. Next press enter key. Then the align-content suggestion should appear.

It happened for users on Windows, e.g. on Chrome or Firefox.

I could reproduce it now in Safari (latest) and Google Chrome (latest) on MacOS, but we have users/webdesigners, which reported us the problem on Windows systems.

Can you reproduce the bug now?

@pento
3 months ago

@pento
3 months ago

#4 @pento
3 months ago

  • Keywords has-patch needs-testing added; reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release

Thank you for the additional information, @dionysous!

I'm able to reproduce this bug consistently. In order to reproduce it, you need to to paste with Cmd+V, and release the Cmd key before releasing V.

In code-editor.js, in the wp.codeEditor.initialize function, the keyup event is deciding to show the autocomplete dropdown because isAlphaKey is true.

44820.2.diff fixes this issue, but I suspect that JS and HTML editing will have similar issues, too.

Note: See TracTickets for help on using tickets.