[RNMobile] Ensure keyboard opens after requesting focus on Android (#…

…57543) * Update `showSoftKeyboard` to wait for the text input to get focus * Check input method manager is defined before hiding keyboard * Set wrapper view of the editor to be not focusable in the demo app This matches the behavior of the host app WP-Android.
WordPress · Jan 4, 2024 · adbf970 · adbf970
1 parent fc3715f
commit adbf970
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 11 deletions.
diff --git a/...ive-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/...ive-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java
@@ -1,5 +1,7 @@
 package org.wordpress.mobile.ReactNativeAztec;
 
+import static android.content.ClipData.Item;
+
 import android.content.ClipData;
 import android.content.ClipboardManager;
 import android.content.Context;
@@ -10,18 +12,19 @@
 import android.graphics.drawable.Drawable;
 import android.os.Handler;
 import android.os.Looper;
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-
 import android.text.Editable;
 import android.text.InputType;
 import android.text.Spannable;
 import android.text.TextUtils;
 import android.text.TextWatcher;
 import android.view.View;
+import android.view.ViewTreeObserver;
 import android.view.inputmethod.InputMethodManager;
 import android.widget.TextView;
 
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.ThemedReactContext;
@@ -41,12 +44,10 @@
 
 import java.lang.reflect.Field;
 import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.HashSet;
 import java.util.LinkedList;
 import java.util.Set;
-import java.util.HashSet;
-import java.util.HashMap;
-
-import static android.content.ClipData.*;
 
 public class ReactAztecText extends AztecText {
 
@@ -64,6 +65,7 @@ public class ReactAztecText extends AztecText {
     private @Nullable TextWatcherDelegator mTextWatcherDelegator;
     private @Nullable ContentSizeWatcher mContentSizeWatcher;
     private @Nullable ScrollWatcher mScrollWatcher;
+    private @Nullable Runnable mKeyboardRunnable;
 
     // FIXME: Used in `incrementAndGetEventCounter` but never read. I guess we can get rid of it, but before this
     // check when it's used in EditText in RN. (maybe tests?)
@@ -264,18 +266,46 @@ public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
     }
 
     private void showSoftKeyboard() {
-        new Handler(Looper.getMainLooper()).post(new Runnable() {
+        // If the text input is already focused we can show the keyboard.
+        if(hasWindowFocus()) {
+            showSoftKeyboardNow();
+        }
+        // Otherwise, we'll wait until it gets focused.
+        else {
+            getViewTreeObserver().addOnWindowFocusChangeListener(new ViewTreeObserver.OnWindowFocusChangeListener() {
+                @Override
+                public void onWindowFocusChanged(boolean hasFocus) {
+                    if (hasFocus) {
+                        showSoftKeyboardNow();
+                        getViewTreeObserver().removeOnWindowFocusChangeListener(this);
+                    }
+                }
+            });
+        }
+    }
+
+    private void showSoftKeyboardNow() {
+        // Cancel any previously scheduled Runnable
+        if (mKeyboardRunnable != null) {
+            removeCallbacks(mKeyboardRunnable);
+        }
+
+        mKeyboardRunnable = new Runnable() {
             @Override
             public void run() {
                 if (mInputMethodManager != null) {
-                    mInputMethodManager.showSoftInput(ReactAztecText.this, 0);
+                    mInputMethodManager.showSoftInput(ReactAztecText.this, InputMethodManager.SHOW_IMPLICIT);
                 }
             }
-        });
+        };
+
+        post(mKeyboardRunnable);
     }
 
     private void hideSoftKeyboard() {
-        mInputMethodManager.hideSoftInputFromWindow(getWindowToken(), 0);
+        if (mInputMethodManager != null) {
+            mInputMethodManager.hideSoftInputFromWindow(getWindowToken(), 0);
+        }
     }
 
     public void setScrollWatcher(ScrollWatcher scrollWatcher) {

diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java
@@ -113,6 +113,8 @@ protected void onCreate(Bundle savedInstanceState) {
         LinearLayout linearLayout = new LinearLayout(this);
         linearLayout.setOrientation(LinearLayout.VERTICAL);
         linearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
+        linearLayout.setFocusable(false);
+        linearLayout.setFocusableInTouchMode(true);
 
         // Create a Toolbar instance
         Toolbar toolbar = new Toolbar(this);