Can't click links in editor Table of Contents (Content Structure / Document Outline)

[scottbarnham]

Describe the bug

When eding a post or page, there's a (i) icon at the top with tooltip "Content Structure" which shows a Document Outline containing Title, H2, etc. These are links so you can click to jump that that section in the editor.

I'm finding the links are not clickable. If I press tab, an outline is removed from the outer box (wrapper div or iframe?), I can then click the links.

To reproduce
Edit a page containing h2 headings. Click (i) icon. Try to click and h2 in the list to jump to that part of the page. Not clickable. Press tab key. Now click link.

Expected behavior
Click links without needing to press tab key first.

Editor version (please complete the following information):

• WordPress version: 5.5
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? default

Desktop (please complete the following information):

• OS: Windows 10 (also Ubuntu 18.04)
• Browser: Chrome
• Version: 84

Smartphone (please complete the following information):
Not tested

Thanks.

[jorgefilipecosta]

I was able to reproduce the issue. The focus is in a container and it seems the clicks go to the container and not to the child unless tab is pressed.

[4faster]

I have the same problem, and I just know if I can use Tab key...

However, there is an iFrame in front of the "document outline",
and an empty HTML document inside.
The links work when I delete that iFrame.

But it will reproduce when I reopen the document outline.

[ddryo]

I was able to reproduce the issue.

I can't click the link to each heading in "Content Structure".
As already mentioned, I was only able to access the link with the tab key.

[Mamaduka]

This should be fixed after recent refactoring - #44788.

I'm able to click and navigate using Heading in the document outline sidebar.

Screenshot