Merge pull request #115 from wordpress-mobile/feature/html-input-view…

…-ux-vol02 Fix jumpy html text input on iOS
WordPress · Sep 10, 2018 · ba7bceb · ba7bceb
2 parents fb6d1f3 + 5e3c1d1
commit ba7bceb
Showing 1 changed file with 9 additions and 16 deletions.
diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js
@@ -38,10 +38,11 @@ type StateType = {
 	inspectBlocks: boolean,
 	blockTypePickerVisible: boolean,
 	selectedBlockType: string,
-	html: string,
 };
 
 export default class BlockManager extends React.Component<PropsType, StateType> {
+	_htmlTextInput: TextInput = null;
+
 	constructor( props: PropsType ) {
 		super( props );
 		this.state = {
@@ -50,7 +51,6 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			inspectBlocks: false,
 			blockTypePickerVisible: false,
 			selectedBlockType: 'core/paragraph', // just any valid type to start from
-			html: '',
 		};
 	}
 
@@ -152,9 +152,8 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 			}, '' );
 	}
 
-	parseHTML() {
+	parseHTML( html: string ) {
 		const { parseBlocksAction } = this.props;
-		const { html } = this.state;
 		parseBlocksAction( html );
 	}
 
@@ -249,11 +248,9 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 	}
 
 	handleSwitchEditor = ( showHtml: boolean ) => {
-		if ( showHtml ) {
-			const html = this.serializeToHtml();
-			this.handleHTMLUpdate( html );
-		} else {
-			this.parseHTML();
+		if ( ! showHtml ) {
+			const html = this._htmlTextInput._lastNativeText;
+			this.parseHTML( html );
 		}
 
 		this.setState( { showHtml } );
@@ -263,10 +260,6 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 		this.setState( { inspectBlocks } );
 	}
 
-	handleHTMLUpdate = ( html: string ) => {
-		this.setState( { html } );
-	}
-
 	renderItem( value: { item: BlockType, clientId: string } ) {
 		const insertHere = (
 			<View style={ styles.containerStyleAddHere } >
@@ -295,16 +288,16 @@ export default class BlockManager extends React.Component<PropsType, StateType>
 
 	renderHTML() {
 		const behavior = Platform.OS === 'ios' ? 'padding' : null;
+		const htmlInputRef = ( el ) => this._htmlTextInput = el;
 		return (
 			<KeyboardAvoidingView style={ { flex: 1 } } behavior={ behavior }>
 				<TextInput
 					textAlignVertical="top"
 					multiline
+					ref={ htmlInputRef }
 					numberOfLines={ 0 }
 					style={ styles.htmlView }
-					value={ this.state.html }
-					onChangeText={ this.handleHTMLUpdate }>
-				</TextInput>
+					value={ this.serializeToHtml() } />
 			</KeyboardAvoidingView>
 		);
 	}