Unable to place caret after cancelled multi-select

[ellatrix]

Description

I've been editing a post on WordPress.com (so not sure if this also occurs with the latest version), and after editing it for a while I can no longer place my caret in some block’s text.

This is probably a problem in the multi select triggering where it should be cancelled but the contenteditable field attributes are not restored.

I'm just logging it here in case someone is experiencing the same issue. I haven't looked into the issue deeper.

Step-by-step reproduction instructions

Not sure how to reproduce consistently.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

No

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[ostowe]

I've been able to replicate this as well, however I'm not sure this is terribly useful as I can only replicate in a standalone install of WP 5.9. After installing the Gutenberg plugin, I can no longer replicate this bug. Here goes anyway:

Step-by-step reproduction instructions

1. Edit a post
2. Confirm post title is editable
3. Multi-select two or more blocks via holding down the shift key or highlighting multiple blocks' content with your cursor.
4. Title will no longer be editable.

Recording

https://www.loom.com/share/d9ece4730a8a4abfb25f1b6d3ce9792b

Environment

MacOS Big Sur 11.6.4
Chrome 98
WordPress 5.9

Existing issues

I have found none that fit this description, open or closed, in the Github issue queue.

Testing without plugins

As mentioned above, I have confirmed this bug in a standalone install of WP 5.9, no plugins active other than the WordPress Importer. I cannot replicate this in the Gutenberg plugin.

[dkoo]

Can confirm that this is replicable in a core 5.9 site without any other plugins active.

[crobertwatson]

I just now confirmed this with a fresh install of WP 5.9.3 with no plugins and default Twenty Twenty Two on my local machine (MacBook M1 2021 running Chrome 100…see https://www.whatsmybrowser.org/b/G105U for details).

1. Add new post
2. Type (not paste) “test” as the title
3. Type (not paste) “test” as the first paragraph
4. Type (not paste) “test” as the second paragraph
5. Save the post
6. Exit the post
7. Edit the post
8. Click in the title to know whether it’s editable (it is)
9. Select the first paragraph by clicking and dragging over its text
10. Continue dragging the mouse selection into the next paragraph. Both paragraphs will now have a colored border around them.
11. Click the title to know whether it’s editable (it is not editable now)

Unless there’s something inherently wrong with my browser, OS, mouse, or keyboard, I can’t see how it’s the content or the WP setup. Please fix as soon as possible. Thanks!

[economiadigitalapps]

Confirmed here too

[mirlanbekturov]

Confirmed and as a short-term code-fix I use the following code:

wp.data.subscribe( function() {
    let elem = document.querySelector( '.editor-post-title' );

    if ( elem ) {
        elem.addEventListener( 'mouseover', function ( e ) {
            if ( ! e.target.hasAttribute( 'contenteditable' ) ) {
                e.target.setAttribute( 'contenteditable', 'true' );
            }
        } )
    }
}

[crobertwatson]

@mirlanbekturov Where are you placing the short-term code fix? Is it enqueued as a part of your website's theme?

[mirlanbekturov]

@mirlanbekturov Where are you placing the short-term code fix? Is it enqueued as a part of your website's theme?

I created the js file and run wp_enqueue_script with admin_head-post.php and admin_head-post-new.php actions

[ellatrix]

This should have been fixed by #38892.