Skip to content
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

Inserter: Cannot read property 'focus' of null/undefined #1606

Closed
afercia opened this issue Jun 30, 2017 · 5 comments
Closed

Inserter: Cannot read property 'focus' of null/undefined #1606

afercia opened this issue Jun 30, 2017 · 5 comments
Labels
[Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jun 30, 2017

On lates master, I get 2 JS errors in the console while tabbing through the inserter items. To reproduce, for example:

  • open the inserter
  • click on the last tab (Embed)
  • click on the Search field
  • press Tab on your keyboard

On the first Tab presses I get::
Uncaught TypeError: Cannot read property 'focus' of null
after a few Tab presses I get:
Uncaught TypeError: Cannot read property 'focus' of undefined

Same happens also on the first/second Tabs in a slightly different way. Same when using arrow navigation (press right/arrow keys instead of Tab).

Also, the new "tabs" added at the bottom can't be navigated using the keyboard.

Maybe related: #1582

@afercia afercia added the [Type] Bug An existing feature does not function as intended label Jun 30, 2017
@afercia
Copy link
Contributor Author

afercia commented Jun 30, 2017

screen shot 2017-06-30 at 15 37 35

@swissspidy
Copy link
Member

Just ran into this as well:

TypeError: undefined is not an object (evaluating 'this.nodes[refName].focus')

The logic flaw is inside InserterMenu.focusNext.

When you're on the "Recent" tab, the findNext() call will not only search inside "Recent", but all the blocks visible in "All".

So when I see this (with focus on "Cover Image"):

screen shot 2017-07-02 at 19 39 12

And when I hit tab, it looks for "Pullquote", which theoretically is next in line:

screen shot 2017-07-02 at 19 39 26

Of course, that doesn't work.

The same happens when you're already focused on the last element in the list in the "All" tab. It then looks for embed blocks in the list.

Proposed solution:

When the last element is reached, focus should go to the tabs.

Even better: Use arrow keys instead of tabs to navigate the blocks. This way you can jump from search to tabs by simply pressing tab twice.

Perhaps this would get solved by #1596. See also: #1588.

@afercia
Copy link
Contributor Author

afercia commented Jul 2, 2017

Even better: Use arrow keys instead of tabs to navigate the blocks. This way you can jump from search to tabs by simply pressing tab twice.

ideally, this should happen inside the category groups with role="menu". This way, the Tab key would navigate from the search to each menu and then to the tabs.
Navigation within each menu should be arrows-only (as the ARIA spec recommends).
Side note: this is also how keyboard interaction works in the macOS emoji inserter:

macos emoji inserter keyboard

@youknowriad
Copy link
Contributor

No errors for me. It's probably fixed elsewhere.

@afercia
Copy link
Contributor Author

afercia commented Aug 2, 2017

Yeah, cannot reproduce.

@afercia afercia closed this as completed Aug 2, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants