WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 3 weeks ago

#52305 new defect (bug)

WordPress Classic & Gutenberg Editor - ENTER key casing Textarea View Position To Jump

Reported by: Darko A7 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords:
Focuses: javascript Cc:

Description

Steps to reproduce: (on Windows 10 x64, Chrome latest browser version)

1) Install latest and greatest WordPress*

  • with "2021" theme as active (theme is irrelevant, actually)
  • absolutely no plugins should be active EXCEPT WordPress Classic Editor: wordpress.org/plugins/classic-editor/
  • NOTE: exact/latest WP version is not actually relevant, either, because this bug is an ongoing issue for at least a 6-12 months now - can't say for sure - it's just that I finally found the time to investigate it on a clean fresh system.
  • Activate plugin, switch to Classic Editor mode for new posts, and switch from Visual to Text input mode (this is very important!).

2) Create new post in Text mode

  • Simply copy-paste provided demo html text (demo lorem ipsum text with sufficient length should be used, to provide enough "page scroll" or reduce browser's window width to approx 1200 pixels to emulate older laptop computer) + add some h3 tags (for easier orientation, as long as you do not scroll all the way down to the end of the text, but position mouse cursor to the end of a paragraph somewhere in the middle you should be able to reproduce this bug.
  • save the post
  • now edit the post (it is best to activate DevTools and disable browser caching just to be sure everything is freshly loaded every time)
  • when you position mouse cursor somewhere in the middle of the article at the end of a paragraph or html element and hit ENTER key on the keyboard (to create new paragraph line), Editor will jump its position and text will completely shift outside visible area to the top!

This is a bug that exists for about a year or so and it is very annoying (to say at least), particularly to us who are used to work directly with html tags in Text mode.

Bug seems to originate in TinyMCE editor's scroll function that is triggered when we hit Enter key (according to debugger). It uses math function to calculate position of the top toolbar with commands. (?)

See provided video recording to visualize the bug itself. Sometimes it may not occur, but try to repeat it again, and it should reproduce.

I would likely to know if there's an easy fix for this. Thanks!

Attachments (3)

html-text-demo.txt (6.3 KB) - added by Darko A7 6 weeks ago.
demo html text for debugging
wordpress-classic-editor-tinymce-in-text-mode-jumpy-scrollToTop-issue-x264.mp4 (6.2 MB) - added by Darko A7 6 weeks ago.
video demonstration of the bug
wordpress-block-editor-in-code-mode-jumpy-scrollToTop-issue-x264.mp4 (7.5 MB) - added by Darko A7 6 weeks ago.
video demonstration of the bug in Block Editor (in Code editor mode)

Change History (7)

@Darko A7
6 weeks ago

demo html text for debugging

#1 @Darko A7
6 weeks ago

Funny thing, I just tested Gutenberg block editor in Code mode (deactivated Classic Editor plugin, of course), and this happens even there, as well. See another video demo attached that demonstrates this.

@Darko A7
6 weeks ago

video demonstration of the bug in Block Editor (in Code editor mode)

#3 @Darko A7
3 weeks ago

Similar, yes, but not the same.
That one was caused by BACKSPACE, this one is caused by ENTER key.

#4 @Darko A7
3 weeks ago

  • Summary changed from WordPress Classic Editor Shifting Textarea View Position To Top to WordPress Classic & Gutenberg Editor - ENTER key casing Textarea View Position To Jump
Note: See TracTickets for help on using tickets.