Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mobile] - Android - Bring the Keyboard back when closing modals #57069

Merged
15 changes: 14 additions & 1 deletion packages/components/src/mobile/bottom-sheet/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ import SafeArea from 'react-native-safe-area';
/**
* WordPress dependencies
*/
import { subscribeAndroidModalClosed } from '@wordpress/react-native-bridge';
import {
subscribeAndroidModalClosed,
showAndroidSoftKeyboard,
} from '@wordpress/react-native-bridge';
import { Component } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';

Expand Down Expand Up @@ -209,6 +212,9 @@ class BottomSheet extends Component {
}

componentWillUnmount() {
// Restore Keyboard Visibility
showAndroidSoftKeyboard();

this.dimensionsChangeSubscription.remove();
this.keyboardShowListener.remove();
this.keyboardHideListener.remove();
Expand Down Expand Up @@ -353,6 +359,9 @@ class BottomSheet extends Component {
onClose();
}
this.onShouldSetBottomSheetMaxHeight( true );

// Restore Keyboard Visibility
showAndroidSoftKeyboard();
}

setIsFullScreen( isFullScreen ) {
Expand All @@ -368,6 +377,10 @@ class BottomSheet extends Component {
onHardwareButtonPress() {
const { onClose } = this.props;
const { handleHardwareButtonPress } = this.state;

// Restore Keyboard Visibility
showAndroidSoftKeyboard();

if ( handleHardwareButtonPress && handleHardwareButtonPress() ) {
return;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
DeferredEventEmitter.JSEventEmitter {
private final ReactApplicationContext mReactContext;
private final GutenbergBridgeJS2Parent mGutenbergBridgeJS2Parent;
private Runnable mKeyboardRunnable;

private static final String EVENT_NAME_REQUEST_GET_HTML = "requestGetHtml";
private static final String EVENT_NAME_UPDATE_HTML = "updateHtml";
Expand Down Expand Up @@ -554,14 +555,44 @@ private ConnectionStatusCallback requestConnectionStatusCallback(final Callback
};
}

@ReactMethod
public void showAndroidSoftKeyboard() {
Activity currentActivity = mReactContext.getCurrentActivity();
if (currentActivity != null) {
// Define the delay in milliseconds to prevent trying to show the keyboard right when a UI change happened.
int delayMillis = 500;
fluiddot marked this conversation as resolved.
Show resolved Hide resolved

// Cancel any previously scheduled Runnable
if (mKeyboardRunnable != null) {
currentActivity.getWindow().getDecorView().removeCallbacks(mKeyboardRunnable);
}

// Create a new Runnable
mKeyboardRunnable = new Runnable() {
@Override
public void run() {
View currentFocusedView = currentActivity.getCurrentFocus();
if (currentFocusedView != null) {
InputMethodManager imm =
(InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.showSoftInput(currentFocusedView, InputMethodManager.SHOW_IMPLICIT);
}
}
};

// Schedule the new Runnable
currentActivity.getWindow().getDecorView().postDelayed(mKeyboardRunnable, delayMillis);
}
}

@ReactMethod
public void hideAndroidSoftKeyboard() {
Activity currentActivity = mReactContext.getCurrentActivity();
if (currentActivity != null) {
View currentFocusedView = currentActivity.getCurrentFocus();
if (currentFocusedView != null) {
InputMethodManager imm =
(InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
(InputMethodManager) mReactContext.getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(currentFocusedView.getWindowToken(), 0);
}
}
Expand Down
14 changes: 14 additions & 0 deletions packages/react-native-bridge/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,20 @@ export function sendEventToHost( eventName, properties ) {
);
}

/**
* Shows Android's soft keyboard if there's a TextInput focused and
* the keyboard is hidden.
*
* @return {void}
*/
export function showAndroidSoftKeyboard() {
fluiddot marked this conversation as resolved.
Show resolved Hide resolved
if ( isIOS ) {
return;
}

RNReactNativeGutenbergBridge.showAndroidSoftKeyboard();
}

/**
* Hides Android's soft keyboard.
*
Expand Down
1 change: 1 addition & 0 deletions test/native/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ jest.mock( '@wordpress/react-native-bridge', () => {
subscribeOnRedoPressed: jest.fn(),
useIsConnected: jest.fn( () => ( { isConnected: true } ) ),
editorDidMount: jest.fn(),
showAndroidSoftKeyboard: jest.fn(),
hideAndroidSoftKeyboard: jest.fn(),
editorDidAutosave: jest.fn(),
subscribeMediaUpload: jest.fn(),
Expand Down
Loading