Additional alignment of focus and selection logic with the web's

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java

@@ -91,8 +91,8 @@ public String getName() {
     @Override
     protected ReactAztecText createViewInstance(ThemedReactContext reactContext) {
         ReactAztecText aztecText = new ReactAztecText(reactContext);
-        aztecText.setFocusableInTouchMode(true);
-        aztecText.setFocusable(true);
+        aztecText.setFocusableInTouchMode(false);
+        aztecText.setFocusable(false);
         aztecText.setCalypsoMode(false);
         return aztecText;
     }
@@ -403,17 +403,6 @@ public void disableGBMode(final ReactAztecText view, boolean disable) {
         }
     }
 
-    /*
-     * This property/method is used to tell the native AztecText to grab the focus when isSelected is true
-     *
-     */
-    @ReactProp(name = "isSelected", defaultBoolean = false)
-    public void isSelected(final ReactAztecText view, boolean selected) {
-        if (selected) {
-            view.requestFocus();
-        }
-    }
-
     @ReactProp(name = "onContentSizeChange", defaultBoolean = false)
     public void setOnContentSizeChange(final ReactAztecText view, boolean onContentSizeChange) {
         if (onContentSizeChange) {

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java

@@ -4,11 +4,12 @@
 import android.content.ClipboardManager;
 import android.content.Context;
 import android.graphics.Rect;
+import android.os.Handler;
+import android.os.Looper;
 import android.support.annotation.Nullable;
 import android.text.Editable;
 import android.text.InputType;
 import android.text.Spannable;
-import android.text.Spanned;
 import android.text.TextUtils;
 import android.text.TextWatcher;
 import android.view.inputmethod.InputMethodManager;
@@ -168,6 +169,17 @@ public boolean onTextContextMenuItem(int id) {
     public void requestFocusFromJS() {
         mIsJSSettingFocus = true;
         requestFocus();
+        new Handler(Looper.getMainLooper()).postDelayed(new Runnable() {
+            @Override
+            public void run() {
+                // let's pinpoint the caret line to ask the system to bring that line into the viewport
+                int lineNumber = getLayout().getLineForOffset(getSelectionStart());
+
+                Rect caretLineRect = new Rect();
+                getLineBounds(lineNumber, caretLineRect);
+                requestRectangleOnScreen(caretLineRect);
+            }
+        }, 100);
         mIsJSSettingFocus = false;
     }
 
@@ -178,6 +190,7 @@ void clearFocusFromJS() {
     @Override
     public void clearFocus() {
         setFocusableInTouchMode(false);
+        setFocusable(false);
         super.clearFocus();
         hideSoftKeyboard();
     }
@@ -195,13 +208,21 @@ public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
             return false;
         }*/
         setFocusableInTouchMode(true);
+        setFocusable(true);
         boolean focused = super.requestFocus(direction, previouslyFocusedRect);
         showSoftKeyboard();
         return focused;
     }
 
-    private boolean showSoftKeyboard() {
-        return mInputMethodManager.showSoftInput(this, 0);
+    private void showSoftKeyboard() {
+        new Handler(Looper.getMainLooper()).post(new Runnable() {
+            @Override
+            public void run() {
+                if (mInputMethodManager != null) {
+                    mInputMethodManager.showSoftInput(ReactAztecText.this, 0);
+                }
+            }
+        });
     }
 
     private void hideSoftKeyboard() {
@@ -227,18 +248,14 @@ public void setContentSizeWatcher(ContentSizeWatcher contentSizeWatcher) {
 
     private void onContentSizeChange() {
         if (mContentSizeWatcher != null) {
-            new java.util.Timer().schedule(
-                    new java.util.TimerTask() {
-                        @Override
-                        public void run() {
-                            if (mContentSizeWatcher != null) {
-                                mContentSizeWatcher.onLayout();
-
-                            }
-                        }
-                    },
-                    500
-            );
+            new Handler(Looper.getMainLooper()).post(new Runnable() {
+                @Override
+                public void run() {
+                    if (mContentSizeWatcher != null) {
+                        mContentSizeWatcher.onLayout();
+                    }
+                }
+            });
         }
         setIntrinsicContentSize();
     }

src/block-management/block-holder.js

@@ -11,11 +11,8 @@ import {
 	View,
 	Text,
 	TouchableWithoutFeedback,
-	NativeSyntheticEvent,
-	NativeTouchEvent,
 	Keyboard,
 } from 'react-native';
-import TextInputState from 'react-native/lib/TextInputState';
 import {
 	requestImageUploadCancel,
 } from 'react-native-gutenberg-bridge';
@@ -57,7 +54,7 @@ type PropsType = BlockType & {
 	onInsertBlocks: ( blocks: Array<Object>, index: number ) => void,
 	onCaretVerticalPositionChange: ( targetId: number, caretY: number, previousCaretY: ?number ) => void,
 	onReplace: ( blocks: Array<Object> ) => void,
-	onSelect: ( clientId: string ) => void,
+	onSelect: ( clientId?: string ) => void,
 	mergeBlocks: ( clientId: string, clientId: string ) => void,
 	moveBlockUp: () => void,
 	moveBlockDown: () => void,
@@ -78,18 +75,10 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
 		};
 	}
 
-	onFocus = ( event: NativeSyntheticEvent<NativeTouchEvent> ) => {
-		if ( event ) {
-			// == Hack for the Alpha ==
-			// When moving the focus from a TextInput field to another kind of field the call that hides the keyboard is not invoked
-			// properly, resulting in keyboard up when it should not be there.
-			// The code below dismisses the keyboard (calling blur on the last TextInput field) when the field that now gets the focus is a non-textual field
-			const currentlyFocusedTextInput = TextInputState.currentlyFocusedField();
-			if ( event.nativeEvent.target !== currentlyFocusedTextInput && ! TextInputState.isTextInput( event.nativeEvent.target ) ) {
-				TextInputState.blurTextInput( currentlyFocusedTextInput );
-			}
+	onFocus = () => {
+		if ( ! this.props.isSelected ) {
+			this.props.onSelect();
 		}
-		this.props.onSelect( this.props.clientId );
 	};
 
 	onRemoveBlockCheckUpload = ( mediaId: number ) => {
@@ -265,7 +254,7 @@ export default compose( [
 			getAccessibilityLabelExtra,
 		};
 	} ),
-	withDispatch( ( dispatch, { clientId, rootClientId }, { select } ) => {
+	withDispatch( ( dispatch, ownProps, { select } ) => {
 		const {
 			insertBlocks,
 			mergeBlocks,
@@ -279,6 +268,7 @@ export default compose( [
 
 		return {
 			mergeBlocks( forward ) {
+				const { clientId } = ownProps;
 				const {
 					getPreviousBlockClientId,
 					getNextBlockClientId,
@@ -297,25 +287,25 @@ export default compose( [
 				}
 			},
 			moveBlockDown() {
-				moveBlocksDown( clientId );
+				moveBlocksDown( ownProps.clientId );
 			},
 			moveBlockUp() {
-				moveBlocksUp( clientId );
+				moveBlocksUp( ownProps.clientId );
 			},
 			removeBlock() {
-				removeBlock( clientId );
+				removeBlock( ownProps.clientId );
 			},
 			onInsertBlocks( blocks: Array<Object>, index: number ) {
-				insertBlocks( blocks, index, rootClientId );
+				insertBlocks( blocks, index, ownProps.rootClientId );
 			},
-			onSelect: ( selectedClientId: string ) => {
-				selectBlock( selectedClientId );
+			onSelect( clientId = ownProps.clientId, initialPosition ) {
+				selectBlock( clientId, initialPosition );
 			},
 			onChange: ( attributes: Object ) => {
-				updateBlockAttributes( clientId, attributes );
+				updateBlockAttributes( ownProps.clientId, attributes );
 			},
 			onReplace( blocks: Array<Object>, indexToSelect: number ) {
-				replaceBlocks( [ clientId ], blocks, indexToSelect );
+				replaceBlocks( [ ownProps.clientId ], blocks, indexToSelect );
 			},
 		};
 	} ),