proper way to programmatically select an inner block in parent block's edit() function

[pbiron]

I've got a BUTTON HTML element in a block I'm developing. When in the editor, if that button is activated (clicked on or Enter pressed when it has focus) I need the editor to select a specific inner block, while also letting the click event bubble up to other click handlers (e.g., a script that is specified in the "script" property of the block in block.json.

This is what I have so far:

import { useDispatch }   = '@wordpress/data';
import { useBlockProps } = '@wordpress/block-editor';

function edit( { clientId } ) {
	const blockProps = useBlockProps(
		{
			key: 'tabs',
			className: 'some-irrelevant-class'
		}
	);

	const { selectBlock } = useDispatch( 'core/block-editor' );
	const innerBlocks     = useSelect( ( select ) => select( 'core/block-editor' ).getBlock( clientId ).innerBlocks );

	const handleClick = ( clientId ) => {
		selectBlock( clientId );
	};

	return [
		<div ...{ blockProps }>
			{
			innerBlocks.map( ( innerBlock, index ) => {
				<button key={ index } onClick={ (e) => handleClick( innerBlock.clientId ) }>
					<span>{ innerBlock.attributes.buttonText }</span>
				</button>
			} );
			}
			<InnerBlocks
				allowedBlocks={ [ 'my-plugin/block-with-buttonText-attribute' ] }
			/>
		</div>
	];
}

This kind of works.

When I click on one of the buttons, the proper innerBlock is selected...but the HTML click event doesn't bubble of the other click handler in the script that is specified in the "script" property in block.json.

When I click on the button a 2nd time, that 2nd click does bubble up to the "script" JS handler.

Is there some other way I should be achieving the programmatic inner block selection that would make a 2nd click on the button unnecessary?

[stokesman]

It’s curious that the first click doesn’t bubble and seems like something else must be calling stopPropagation. Does it make a difference if the block (the container) is already selected or not?

One thing that might be worth a try in the "script" is to make the click listener capturing to catch the event before the bubble phase. If that’s doesn’t do it, adding the capture listener to the container rather than the individual buttons seems like it surely would but will require the handler to determine which button is clicked and what to do.