New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS TypeError: Safari and IE11: Escape doesn't move focus back from the toolbar to the block content #6165

Open
afercia opened this Issue Apr 13, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@afercia
Contributor

afercia commented Apr 13, 2018

Noticed while investigating on #6118 / #6163.

When using the keyboard and moving focus from the block content to the toolbar using Alt+F10, then pressing Escape is supposed to move focus back from the toolbar to the block content.

This works perfectly on Chrome, Firefox, and Edge. It doesn't work on Safari and IE11.

I've quickly seen there's a check for an actual selection and focus is moved back only if there's a selection. I'd suspect the method to get the selection doesn't work with IE11 (not surprisingly) and Safari.

@afercia

This comment has been minimized.

Contributor

afercia commented Apr 13, 2018

Yep seems in Safari there's no selection, so focusNode is null:

screen shot 2018-04-13 at 11 14 05

See

I guess something similar happens in IE11. Seems window.getSelection() fails in these browsers when there's a selection but the actual focus is somewhere else? (this used to happen in old IEs)

@afercia afercia changed the title from Safari and IE11: Escape doesn't move focus back from the toolbar to the block content to JS TypeError: Safari and IE11: Escape doesn't move focus back from the toolbar to the block content Apr 13, 2018

@afercia

This comment has been minimized.

Contributor

afercia commented Apr 13, 2018

This is what the selection looks like in IE11 (please ignore the other warnings):

screenshot 109

Seems there's a selection, but focus is not moved back to the block content.

@designsimply

This comment has been minimized.

Contributor

designsimply commented Jul 23, 2018

Tested and confirmed that, when using Safari, pressing Alt+F10 moves focus to the block toolbar and that pressing escape or Alt+F10 again does not return focus to the content area. I also noticed that pressing Tab in Safari returns focus from the block toolbar to content area and that pressing Tab in Firefox moves between different block toolbar options whereas Esc returns the focus to the content area.

Video: 20s
Seen at http://alittletestblog.com/wp-admin/post.php?post=13999&action=edit running WordPress 4.9.7 and Gutenberg 3.3.0 using Safari 11.1.2 on macOS 10.13.6.

Error seen in the Safari browser console after pressing Esc while the toolbar has keyboard focus:

TypeError: null is not an object (evaluating 't.nodeType')
http://alittletestblog.com/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js

Note: since the script source is a React file this may be an upstream bug in React.

@afercia

This comment has been minimized.

Contributor

afercia commented Sep 10, 2018

Still a problem in current master 3.8.0-rc.1. Just re-tested in Safari 11.1.2 and getting:

TypeError: null is not an object (evaluating 'focusElement.nodeType')

@afercia afercia added this to the WordPress 5.0 milestone Sep 10, 2018

@afercia afercia added the Needs Dev label Sep 10, 2018

@afercia

This comment has been minimized.

Contributor

afercia commented Sep 27, 2018

Note: this doesn't happen on the TinyMCE demo https://www.tiny.cloud but still happens on current Gutenberg master 4.0. It appears to be something specific to the selection methods used in Gutenberg.

@aduth

This comment has been minimized.

Member

aduth commented Oct 11, 2018

Fix proposed at #10529

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment