Fix navigation in inserter menu triggering writing flow

[talldan]

Description

Fixes #9583

Particular keyboard interaction (up/down arrow keys) was causing focus to transfer out of the default block's insertion menu.

What causes this?
As far as I can tell, the ObserveTyping component is receiving those events and triggering the START_TYPING action, potentially causing focus to transfer to a block:

gutenberg/packages/editor/src/components/observe-typing/index.js

Lines 165 to 171 in a696e50

	<div
	onFocus={ this.stopTypingOnNonTextField }
	onKeyPress={ this.startTypingInTextField }
	onKeyDown={ this.startTypingInTextField }
	>
	{ children }
	</div>

There might also be other event handlers acting on those events, but if so I haven't been able to determine what they are.

The fix
In this PR I've used the same technique as used in the LinkContainer to prevent this:

gutenberg/packages/editor/src/components/rich-text/format-toolbar/link-container.js

Lines 59 to 64 in a696e50

	<form
	className="editor-format-toolbar__link-container-content"
	onKeyPress={ stopKeyPropagation }
	onKeyDown={ onKeyDown }
	onSubmit={ submitLink }
	>

☝️ Here onKeyPress and onKeyDown events are used to prevent propagation of keyboard events outside of the popover. I've applied the same to the block insertion menu.

How has this been tested?

• Manual testing
  1 - Open the inserter menu from the default block
  2 - Press the up or down arrow key
  Expected - focus should remain within the inserter search input
  Actual - focus is taken to a block

• Added an e2e test to catch regressions

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[afercia]

@talldan thanks for working on this! Tested and works for me.

Worth noting left / arrow keys for input and textarea elements have been fixed in #9978 see isNavigationCandidate() in WritingFlow. That works only on the inserter search field though 🙂This PR makes the inserter fully operable with a keyboard (up / down arrow keys, scroll the scrollable div, any arrow keys press on any inserter element doesn't trigger WritingFlow any longer and that's good).

Just wondering if for the future a more abstracted solution could be valuable, as in: giving the ability to components to not trigger WritingFlow.

[youknowriad]

Just wondering if for the future a more abstracted solution could be valuable, as in: giving the ability to components to not trigger WritingFlow.

Seems like something good to consider. I don't see it as blocking for the PR though.

[youknowriad]

LGTM 👍

[aduth]

I think we should change the position of ObserveTyping from being a single top-level observer to being wrapped more granularly around the block's editable region, or perhaps even specifically as part of RichText.