Skip to content

Commit f51773e

Browse files
levibuzolicfacebook-github-bot
authored andcommitted
Allow Modal to handle hardware escape key in the same way the back button is handled (#31564)
Summary: On Android, when a hardware keyboard is connected pressing the escape key will partially dismiss an active `<Modal>` without calling the `onRequestClose` callback. The modal will disappear, but I beleive the underlying activity may still be present, blocking interaction with the main app below and leaving things in a partially broken state. This code change allows the escape key to be handled in the same way as the hardware back button, calling the `onRequestClose` and allowing the developer to decide the behaviour. This issue isn't present on iOS, so no change is required there. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Fix Modal being dismissed incorrectly when pressing escape on a hardware keyboard Pull Request resolved: #31564 Test Plan: I've tested this manually locally, but unsure if it's possible to test in an automated way as the emulator didn't respond to a hardware escape key in the same way as a physical device. Reviewed By: ShikaSD Differential Revision: D28953718 Pulled By: lunaleaps fbshipit-source-id: 5547bc5d894da0d3d9daf4515b1af9c2407815db
1 parent ecd6927 commit f51773e

File tree

1 file changed

+7
-11
lines changed

1 file changed

+7
-11
lines changed

ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.java

+7-11
Original file line numberDiff line numberDiff line change
@@ -293,24 +293,20 @@ protected void showOrUpdate() {
293293
@Override
294294
public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
295295
if (event.getAction() == KeyEvent.ACTION_UP) {
296-
// We need to stop the BACK button from closing the dialog by default so we capture
297-
// that
298-
// event and instead inform JS so that it can make the decision as to whether or not
299-
// to
300-
// allow the back button to close the dialog. If it chooses to, it can just set
301-
// visible
302-
// to false on the Modal and the Modal will go away
303-
if (keyCode == KeyEvent.KEYCODE_BACK) {
296+
// We need to stop the BACK button and ESCAPE key from closing the dialog by default
297+
// so we capture that event and instead inform JS so that it can make the decision as
298+
// to whether or not to allow the back/escape key to close the dialog. If it chooses
299+
// to, it can just set visible to false on the Modal and the Modal will go away
300+
if (keyCode == KeyEvent.KEYCODE_BACK || keyCode == KeyEvent.KEYCODE_ESCAPE) {
304301
Assertions.assertNotNull(
305302
mOnRequestCloseListener,
306303
"setOnRequestCloseListener must be called by the manager");
307304
mOnRequestCloseListener.onRequestClose(dialog);
308305
return true;
309306
} else {
310307
// We redirect the rest of the key events to the current activity, since the
311-
// activity
312-
// expects to receive those events and react to them, ie. in the case of the dev
313-
// menu
308+
// activity expects to receive those events and react to them, ie. in the case of
309+
// the dev menu
314310
Activity currentActivity = ((ReactContext) getContext()).getCurrentActivity();
315311
if (currentActivity != null) {
316312
return currentActivity.onKeyUp(keyCode, event);

0 commit comments

Comments
 (0)