From 4a85e23e88169efe84f5ae557c9059beb915ab1e Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 6 Mar 2018 15:59:47 -0500 Subject: [PATCH] Block List: Capture focus event on block wrapper Corresponding to move of tabIndex from inner edit element to wrapper, we also need to capture focus from wrapper. This way, when focus is applied via WritingFlow, the block appropriately becomes selected. This may also make "onSelect" of movers unnecessary. --- editor/components/block-list/block.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index 59fc177d168b4..18cc58e99ba48 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -196,6 +196,8 @@ export class BlockListBlock extends Component { // eslint-disable-next-line react/no-find-dom-node node = findDOMNode( node ); + this.wrapperNode = node; + this.props.blockRef( node, this.props.uid ); } @@ -214,7 +216,11 @@ export class BlockListBlock extends Component { focusTabbable() { const { initialPosition } = this.props; - if ( this.node.contains( document.activeElement ) ) { + // Focus is captured by the wrapper node, so while focus transition + // should only consider tabbables within editable display, since it + // may be the wrapper itself or a side control which triggered the + // focus event, don't unnecessary transition to an inner tabbable. + if ( this.wrapperNode.contains( document.activeElement ) ) { return; } @@ -578,6 +584,7 @@ export class BlockListBlock extends Component { className={ wrapperClassName } data-type={ block.name } onTouchStart={ this.onTouchStart } + onFocus={ this.onFocus } onClick={ this.onClick } tabIndex="0" childHandledEvents={ [ @@ -585,7 +592,6 @@ export class BlockListBlock extends Component { 'onDragStart', 'onMouseDown', 'onKeyDown', - 'onFocus', ] } { ...wrapperProps } > @@ -618,7 +624,6 @@ export class BlockListBlock extends Component { onDragStart={ this.preventDrag } onMouseDown={ this.onPointerDown } onKeyDown={ this.onKeyDown } - onFocus={ this.onFocus } className="editor-block-list__block-edit" aria-label={ blockLabel } data-block={ block.uid }