Custom Gutenberg block focuses on inner block when added to the editor

Question

I created a custom Gutenberg block with nested inner blocks. The edit function looks like:

edit: (props) => {
 <div className="custom-block">
    <InnerBlocks
    template={[
      [ 'core/columns', {'className': 'page-layout-columns columns is-multiline'}, [
        [ 'core/column', {'className': 'column is-two-thirds-desktop is-full-tablet is-full-mobile page-layout-main'},[['core/paragraph', {'placeholder': 'Main content area. Start typing to add content, or remove this default paragraph block and then add new blocks.'}]] ],
        [ 'core/column', {'className': 'column is-one-quarter-desktop is-full-tablet is-full-mobile page-layout-sidebar'},[['core/paragraph', {'placeholder': 'Sidebar content area. Start typing to add content, or remove this default paragraph block and then add new blocks.'}]]],
    ]
    ]]}
    />
  </div>}

When this block is added to the editor, the core columns block is focused instead of the block wrapper. What should I do to make the block wrapper the initial focus? Any comments are greatly appreciated. Thanks!

Answer 1

For those who also have this problem, there is a property templateInsertUpdatesSelection={ false } that can remove the auto focus on the columns block.