wpview: Delegate focus to opened modal on edit

[danielbachhuber]

Shortcake (Shortcode UI) uses wpviews to preview a rendered shortcode in TinyMCE. It offers a Backbone-based modal for editing shortcode attributes.

When a user clicks the wpviews edit icon though, the focus remains on the editor, instead of being delegated to the modal. The behavior was added in r29298: https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/tinymce/plugins/wpview/plugin.js#L334

It would be nice if we could delegate focus to the modal: ​https://github.com/fusioneng/Shortcake/issues/66

[azaozz]

The editor.focus(); is needed for IE. All versions of IE treat non-editable elements in the editor (and even block elements with height/width set) as separate DOM fragments when selected, i.e. when the thick diagonal border with resize handles is shown.

As the wpView toolbar is inside the non-editable element, the focus is transferred there on clicking a button. We hide the IE border, but the focus remains inside that DOM fragment which is outside of the editor DOM. That causes range errors when the wpView gets updated.

To fix this we can move the focus back to the editor before opening the modal, only in IE.

[azaozz]

In 30986:

TinyMCE wpView: when clicking on the Edit button, move the focus back to the editor before opening the modal. This is needed for IE so TinyMCE can save the proper DOM "bookmark", and makes it possible to move the focus to the modal after it is opened.
See #30817.

[azaozz]

Leaving this open for further investigation/testing. It seems sometimes in Chrome the modal is not focused when used for the first time.

[danielbachhuber]

Confirmed r30986 is a valid fix. I wasn't able to reproduce your buggy Chrome behavior, either.

[DrewAPicture]

@azaozz: Is there still as reproduceable problem in Chrome? Or could we call this fixed for 4.2?

[azaozz]

Re-tested and all seems to be working as intended.