Link Control: Unable to edit text in development mode

[Mamaduka]

The LinkControl popover steals the focus and prevents editing the text in development mode. See: #61943.

Affected e2e tests:

• editor/blocks/links.spec.js - should allow editing text underneath popover when activated via mouse.
• editor/various/block-bindings.spec.js - should add empty button block when pressing enter.

Steps to reproduce

• Checkout branch from Try: Re-enable React StrictMode #61943.
• Enable SCRIPT_DEBUG for non wp-env setups.
• Create a post.
• Add a paragraph and add a link to some selection.
• Try editing the linked text.

Screencast

CleanShot.2024-05-29.at.12.56.40.mp4

[Mamaduka]

My guess is that the following effect might be responsible for the bug:

gutenberg/packages/block-editor/src/components/link-control/index.js

Lines 218 to 239 in 7fbb0e2

	useEffect( () => {
	// We don't auto focus into the Link UI on mount
	// because otherwise using the keyboard to select text
	// *within* the link format is not possible.
	if ( isMounting.current ) {
	isMounting.current = false;
	return;
	}
	// Scenario - when:
	// - switching between editable and non editable LinkControl
	// - clicking on a link
	// ...then move focus to the *first* element to avoid focus loss
	// and to ensure focus is *within* the Link UI.
	const nextFocusTarget =
	focus.focusable.find( wrapperNode.current )[ 0 ] ||
	wrapperNode.current;
	nextFocusTarget.focus();
	isEndingEditWithFocus.current = false;
	}, [ isEditingLink, isCreatingPage ] );

cc @getdave, @jeryj