Update state in componentDidMount

The previous approach of setting the child component's `isSelected` prop
at the time the child was rendered based on
`this.props.isSelected && this.state.isCaptionSelected` did not work when:

  (a) the child was selected (so its `isSelected` prop was true);
  (b) the child component had no text; and
  (c) the parent's `isSelected` prop was changed to false
      (i.e., another block was selected).

Because the child component is not rendered when both the parent's `isSelected`
prop is false and the caption does not contain any text, the child
component's `onBlur` prop function (the `onCaptionBlur function) would not
be called and update the `isCaptionSelected` state to be false.

This bug shows when a user selects an empty caption, then selects a different
block (thereby hiding the caption since it is empty), and then re-selects the
image with the empty caption. In that scenario, upon re-selecting the image
with the empty caption, the empty caption would appear and immediately be
selected instead of just appearing. This bug would not appear if there
was any text in the caption, because then the caption would always
render and its `onBlur` prop function would be called.

packages/block-library/src/image/edit.native.js

@@ -62,7 +62,7 @@ class ImageEdit extends React.Component {
 			progress: 0,
 			isUploadInProgress: false,
 			isUploadFailed: false,
-			captionFocused: false,
+			isCaptionSelected: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
@@ -103,6 +103,12 @@ class ImageEdit extends React.Component {
 		this.removeMediaUploadListener();
 	}
 
+	componentWillReceiveProps( nextProps ) {
+		this.setState( ( state ) => ( {
+			isCaptionSelected: nextProps.isSelected && state.isCaptionSelected,
+		} ) );
+	}
+
 	onImagePressed() {
 		const { attributes } = this.props;
 
@@ -218,9 +224,9 @@ class ImageEdit extends React.Component {
 		if ( this.props.onFocus ) {
 			this.props.onFocus();
 		}
-		if ( ! this.state.captionFocused ) {
+		if ( ! this.state.isCaptionSelected ) {
 			this.setState( {
-				captionFocused: true,
+				isCaptionSelected: true,
 			} );
 		}
 	}
@@ -229,9 +235,9 @@ class ImageEdit extends React.Component {
 		if ( this.props.onBlur ) {
 			this.props.onBlur();
 		}
-		if ( this.state.captionFocused ) {
+		if ( this.state.isCaptionSelected ) {
 			this.setState( {
-				captionFocused: false,
+				isCaptionSelected: false,
 			} );
 		}
 	}
@@ -358,7 +364,7 @@ class ImageEdit extends React.Component {
 			<TouchableWithoutFeedback onPress={ this.onImagePressed } disabled={ ! isSelected }>
 				<View style={ { flex: 1 } }>
 					{ showSpinner && <Spinner progress={ progress } /> }
-					{ ( ! this.state.captionFocused ) &&
+					{ ( ! this.state.isCaptionSelected ) &&
 						<BlockControls>
 							{ toolbarEditButton }
 						</BlockControls>
@@ -423,7 +429,7 @@ class ImageEdit extends React.Component {
 								onChange={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
 								onFocus={ this.onFocusCaption }
 								onBlur={ this.onBlurCaption }
-								isSelected={ isSelected && this.state.captionFocused }
+								isSelected={ this.state.isCaptionSelected }
 								fontSize={ 14 }
 								underlineColorAndroid="transparent"
 							/>