IE11: Enter in a paragraph loses focus.

[jasmussen]

Steps to reproduce:

• Use IE11
• Set focus in a Paragraph
• Type some text and press Enter
• Note that focus is lost and you have to click the new paragraph to set focus there again

Expected result: you should just be able to keep typing.

When focus is lost, it's actually set on the body element. An additional side effect is that clicking a paragraph to type requires two clicks. The first click sets focus on the block itself (.editor-block-list__block), and the 2nd click finally sets focus where it needs to be.

This appears to have been a regression that happened between Gutenberg 3.8.1 and 3.9.1.

3.8.1 GIF of the expected behavior:

3.9.1 GIF of the bug:

[afercia]

Some more details from #12180 (a duplicate of this). Worth noting this is not just about mouse interaction, but it also breaks the "Enter – create a new paragraph – just write" flow.

To me, seems the first time focus is set on the block wrapper (not on the body). I'm using a testing tool that adds a red outline to elements that receive focus:

Testing in latest master 4.5.1
Windows 10, IE 11

• create a new post
• enter a title
• press Enter
• focus is apparently moved to the default empty block:

• notice there's no visible caret
• try to type something: nothing happens
• expected: caret to be in the editable field and typing to work

Now, there's the need to press the Tab key to actually move focus to the editable area:

• notice the focused element is now the actual editable field
• the caret appears initially misplaced below the editable field (tried both in Twenty Nineteen and Twenty Seventeen)
• start typing: characters are entered in the field as expected

This happens with all the following added blocks, making the writing experience with the keyboard less than ideal.

[jasmussen]

Perhaps should've noted here also. The following PR was the cause of the regression:

#10723

[afercia]

Please verify if the fix for this fixes also #12181

[jasmussen]

💥