Fix focus on title on mount

wordpress-mobile · Apr 16, 2019 · ed9a548 · ed9a548
1 parent e88e4a6
commit ed9a548
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 26 deletions.
diff --git a/jest/setup.js b/jest/setup.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { NativeModules } from 'react-native';
+
 jest.mock( '../react-native-gutenberg-bridge', () => {
 	return {
 		addEventListener: jest.fn(),
@@ -36,3 +41,22 @@ if ( ! global.window.matchMedia ) {
 		removeListener: () => {},
 	} );
 }
+
+// Overwrite some native module mocks from `react-native` jest preset:
+// https://github.com/facebook/react-native/blob/master/jest/setup.js
+// to fix issue "TypeError: Cannot read property 'Commands' of undefined"
+// raised when calling focus or blur on a native component
+const mockNativeModules = {
+	UIManager: {
+		...NativeModules.UIManager,
+		getViewManagerConfig: jest.fn( () => ( { Commands: {} } ) ),
+	},
+};
+
+Object.keys( mockNativeModules ).forEach( ( module ) => {
+	try {
+		jest.doMock( module, () => mockNativeModules[ module ] ); // needed by FacebookSDK-test
+	} catch ( error ) {
+		jest.doMock( module, () => mockNativeModules[ module ], { virtual: true } );
+	}
+} );
diff --git a/src/app/AppContainer.js b/src/app/AppContainer.js
@@ -5,12 +5,11 @@
  * External dependencies
  */
 import React from 'react';
-import { type EmitterSubscription, type InputText } from 'react-native';
+import { type EmitterSubscription } from 'react-native';
 import RNReactNativeGutenbergBridge, {
 	subscribeParentGetHtml,
 	subscribeParentToggleHTMLMode,
 	subscribeUpdateHtml,
-	subscribeSetFocusOnTitle,
 	subscribeSetTitle,
 	sendNativeEditorDidLayout,
 } from 'react-native-gutenberg-bridge';
@@ -60,18 +59,14 @@ type PropsType = {
  */
 class AppContainer extends React.Component<PropsType> {
 	post: PostType;
-	postTitleRef: ?InputText;
 	subscriptionParentGetHtml: ?EmitterSubscription;
 	subscriptionParentToggleHTMLMode: ?EmitterSubscription;
 	subscriptionParentUpdateHtml: ?EmitterSubscription;
-	subscriptionParentSetFocusOnTitle: ?EmitterSubscription;
 	subscriptionParentSetTitle: ?EmitterSubscription;
 
 	constructor( props: PropsType ) {
 		super( props );
 
-		( this: any ).setTitleRef = this.setTitleRef.bind( this );
-
 		this.post = props.post || {
 			id: 1,
 			title: {
@@ -104,12 +99,6 @@ class AppContainer extends React.Component<PropsType> {
 			this.updateHtmlAction( payload.html );
 		} );
 
-		this.subscriptionParentSetFocusOnTitle = subscribeSetFocusOnTitle( () => {
-			if ( this.postTitleRef ) {
-				this.postTitleRef.focus();
-			}
-		} );
-
 		this.subscriptionParentSetTitle = subscribeSetTitle( ( payload ) => {
 			this.props.editTitle( payload.title );
 		} );
@@ -128,10 +117,6 @@ class AppContainer extends React.Component<PropsType> {
 			this.subscriptionParentUpdateHtml.remove();
 		}
 
-		if ( this.subscriptionParentSetFocusOnTitle ) {
-			this.subscriptionParentSetFocusOnTitle.remove();
-		}
-
 		if ( this.subscriptionParentSetTitle ) {
 			this.subscriptionParentSetTitle.remove();
 		}
@@ -176,14 +161,9 @@ class AppContainer extends React.Component<PropsType> {
 		this.props.resetEditorBlocksWithoutUndoLevel( parsed );
 	}
 
-	setTitleRef( titleRef: ?InputText ) {
-		this.postTitleRef = titleRef;
-	}
-
 	render() {
 		return (
 			<MainScreen
-				setTitleRef={ this.setTitleRef }
 				onNativeEditorDidLayout={ sendNativeEditorDidLayout }
 			/>
 		);

diff --git a/src/app/MainScreen.js b/src/app/MainScreen.js
@@ -5,7 +5,7 @@
  * External dependencies
  */
 import React from 'react';
-import { type InputText, LayoutChangeEvent, SafeAreaView } from 'react-native';
+import { LayoutChangeEvent, SafeAreaView } from 'react-native';
 import SafeArea from 'react-native-safe-area';
 
 /**
@@ -26,7 +26,6 @@ type PropsType = {
 	isReady: boolean,
 	mode: string,
 	onNativeEditorDidLayout: () => ?mixed,
-	setTitleRef: ?InputText => void,
 };
 
 type StateType = {
@@ -116,7 +115,6 @@ class MainScreen extends React.Component<PropsType, StateType> {
 				isFullyBordered={ this.state.isFullyBordered }
 				rootViewHeight={ this.state.rootViewHeight }
 				safeAreaBottomInset={ this.state.safeAreaBottomInset }
-				setTitleRef={ this.props.setTitleRef }
 			/>
 		);
 	}

diff --git a/src/app/VisualEditor.js b/src/app/VisualEditor.js
@@ -31,7 +31,6 @@ type PropsType = {
 	rootViewHeight: number,
 	safeAreaBottomInset: number,
 	isFullyBordered: boolean,
-	setTitleRef: ?InputText => void,
 };
 
 /*
@@ -40,6 +39,14 @@ type PropsType = {
  * - `gutenberg/packages/edit-post/src/components/layout/index.js`
  */
 class VisualEditor extends React.Component<PropsType> {
+	postTitleRef: ?InputText;
+
+	componentDidMount() {
+		if ( this.postTitleRef ) {
+			this.postTitleRef.focus();
+		}
+	}
+
 	blockHolderBorderStyle() {
 		return this.props.isFullyBordered ? styles.blockHolderFullBordered : styles.blockHolderSemiBordered;
 	}
@@ -52,7 +59,7 @@ class VisualEditor extends React.Component<PropsType> {
 
 		return (
 			<PostTitle
-				innerRef={ this.props.setTitleRef }
+				innerRef={ ( titleRef: ?InputText ) => this.postTitleRef = titleRef }
 				title={ title }
 				onUpdate={ editTitle }
 				placeholder={ __( 'Add title' ) }