Select mode: fix navigate by pointer (#31321)

* Select mode: fix navigate by pointer

* Fix inner blocks

packages/block-editor/src/components/block-list/use-block-props/use-nav-mode-exit.js

@@ -15,22 +15,24 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useNavModeExit( clientId ) {
-	const isEnabled = useSelect( ( select ) => {
-		const { isNavigationMode, isBlockSelected } = select(
-			blockEditorStore
-		);
-		return isNavigationMode() && isBlockSelected( clientId );
-	}, [] );
-	const { setNavigationMode } = useDispatch( blockEditorStore );
-
+	const { isNavigationMode, isBlockSelected } = useSelect( blockEditorStore );
+	const { setNavigationMode, selectBlock } = useDispatch( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
-			if ( ! isEnabled ) {
-				return;
-			}
+			function onMouseDown( event ) {
+				// Don't select a block if it's already handled by a child
+				// block.
+				if ( isNavigationMode() && ! event.defaultPrevented ) {
+					// Prevent focus from moving to the block.
+					event.preventDefault();
 
-			function onMouseDown() {
-				setNavigationMode( false );
+					// When clicking on a selected block, exit navigation mode.
+					if ( isBlockSelected( clientId ) ) {
+						setNavigationMode( false );
+					} else {
+						selectBlock( clientId );
+					}
+				}
 			}
 
 			node.addEventListener( 'mousedown', onMouseDown );
@@ -39,6 +41,6 @@ export function useNavModeExit( clientId ) {
 				node.addEventListener( 'mousedown', onMouseDown );
 			};
 		},
-		[ isEnabled ]
+		[ clientId, isNavigationMode, isBlockSelected, setNavigationMode ]
 	);
 }