More reliable way to update focus, do not share object references wit…

…h dataSource and use react lifecycle methods to update instead

src/app/AppContainer.js

@@ -2,7 +2,7 @@
  * @format */
 
 import { connect } from 'react-redux';
-import { isEqual } from 'lodash';
+import { cloneDeep } from 'lodash';
 
 import MainApp from './MainApp';
 import { parse, serialize } from '@wordpress/blocks';
@@ -11,22 +11,14 @@ import { compose } from '@wordpress/compose';
 import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
 const mapStateToProps = ( state, ownProps ) => {
-	let blocks = ownProps.blocks;
-	let refresh = false;
-
-	const newBlocks = ownProps.blocks.map( ( block ) => {
-		block.focused = ownProps.isBlockSelected( block.clientId );
-		return block;
+	const blocks = ownProps.blocksFromState.map( block => {
+		const newBlock = cloneDeep( block );
+		newBlock.focused = ownProps.isBlockSelected( block.clientId );
+		return newBlock;
 	} );
 
-	if ( ! isEqual( blocks, newBlocks ) ) {
-		blocks = newBlocks;
-		refresh = true;
-	}
-
 	return {
-		blocks,
-		refresh,
+		blocks
 	};
 };
 
@@ -82,11 +74,12 @@ export default compose( [
 			rootClientId,
 			isBlockSelected,
 			selectedBlockIndex: getBlockIndex( selectedBlockClientId, rootClientId ),
-			blocks: getBlocks(),
+			blocksFromState: getBlocks(),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
 		const {
+			clearSelectedBlock,
 			insertBlock,
 			mergeBlocks,
 			moveBlocksDown,
@@ -104,7 +97,10 @@ export default compose( [
 			onMoveUp: moveBlocksUp,
 			onRemove: removeBlock,
 			onResetBlocks: resetBlocks,
-			onSelect: selectBlock,
+			onSelect: ( clientId ) => {
+				clearSelectedBlock();
+				selectBlock( clientId );
+			},
 			onAttributesUpdate: updateBlockAttributes,
 		};
 	} ),

src/block-management/block-manager.js

@@ -4,6 +4,7 @@
  */
 
 import React from 'react';
+import { isEqual } from 'lodash';
 import { Platform, Switch, Text, View, FlatList, KeyboardAvoidingView } from 'react-native';
 import RecyclerViewList, { DataSource } from 'react-native-recyclerview-list';
 import BlockHolder from './block-holder';
@@ -29,7 +30,6 @@ export type BlockListType = {
 	mergeBlocksAction: ( string, string ) => mixed,
 	blocks: Array<BlockType>,
 	aztechtml: string,
-	refresh: boolean,
 };
 
 type PropsType = BlockListType;
@@ -40,6 +40,7 @@ type StateType = {
 	blockTypePickerVisible: boolean,
 	blocks: Array<BlockType>,
 	selectedBlockType: string,
+	refresh: boolean,
 };
 
 export default class BlockManager extends React.Component<PropsType, StateType> {
@@ -52,6 +53,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			inspectBlocks: false,
 			blockTypePickerVisible: false,
 			selectedBlockType: 'core/paragraph', // just any valid type to start from
+			refresh: false,
 		};
 	}
 
@@ -121,14 +123,16 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			};
 		}
 
-		if ( state.blocks !== props.blocks ) {
+		if ( ! isEqual( state.blocks, props.blocks ) ) {
 			const blockFocused = props.blocks.find( block => block.focused );
 			if ( blockFocused ) {
 				BlockManager.focusDataSourceItem( state.dataSource, blockFocused.clientId );
 			}
+			// TODO: handle attributes change here
 			return {
 				...state,
 				blocks: props.blocks,
+				refresh: ! state.refresh,
 			};
 		}
 
@@ -276,7 +280,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 				<FlatList
 					style={ styles.list }
 					data={ this.state.blocks }
-					extraData={ { refresh: this.props.refresh, inspectBlocks: this.state.inspectBlocks } }
+					extraData={ { refresh: this.state.refresh, inspectBlocks: this.state.inspectBlocks } }
 					keyExtractor={ ( item ) => item.clientId }
 					renderItem={ this.renderItem.bind( this ) }
 				/>
@@ -337,7 +341,7 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		this.setState( { inspectBlocks } );
 	}
 
-	renderItem( value: { item: BlockType, clientId: string } ) {
+	renderItem( value: { item: BlockType } ) {
 		const insertHere = (
 			<View style={ styles.containerStyleAddHere } >
 				<View style={ styles.lineStyleAddHere }></View>
@@ -349,13 +353,13 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		return (
 			<View>
 				<BlockHolder
-					key={ value.clientId }
+					key={ value.item.clientId }
 					onInlineToolbarButtonPressed={ this.onInlineToolbarButtonPressed.bind( this ) }
 					onBlockHolderPressed={ this.onBlockHolderPressed.bind( this ) }
 					onChange={ this.onChange.bind( this ) }
 					showTitle={ this.state.inspectBlocks }
 					focused={ value.item.focused }
-					clientId={ value.clientId }
+					clientId={ value.item.clientId }
 					insertBlocksAfter={ ( blocks ) =>
 						this.insertBlocksAfter.bind( this )( value.item.clientId, blocks )
 					}