diff --git a/src/components/Button.js b/src/components/Button.js
index 0857d839b617..85254d4c1e75 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {withNavigationFocus} from '@react-navigation/compat';
 import {Pressable, ActivityIndicator, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
@@ -10,6 +11,8 @@ import Icon from './Icon';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import HapticFeedback from '../libs/HapticFeedback';
+import withNavigationFallback from './withNavigationFallback';
+import compose from '../libs/compose';
 import * as Expensicons from './Icon/Expensicons';
 import colors from '../styles/colors';
 
@@ -97,6 +100,9 @@ const propTypes = {
 
     /** Should enable the haptic feedback? */
     shouldEnableHapticFeedback: PropTypes.bool,
+
+    /** Whether Button is on active screen */
+    isFocused: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -146,7 +152,7 @@ class Button extends Component {
 
         // Setup and attach keypress handler for pressing the button with Enter key
         this.unsubscribe = KeyboardShortcut.subscribe(shortcutConfig.shortcutKey, (e) => {
-            if (this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
+            if (!this.props.isFocused || this.props.isDisabled || this.props.isLoading || (e && e.target.nodeName === 'TEXTAREA')) {
                 return;
             }
             this.props.onPress();
@@ -277,4 +283,7 @@ class Button extends Component {
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 
-export default Button;
+export default compose(
+    withNavigationFallback,
+    withNavigationFocus,
+)(Button);
diff --git a/src/components/withNavigationFallback.js b/src/components/withNavigationFallback.js
new file mode 100644
index 000000000000..016c8954c348
--- /dev/null
+++ b/src/components/withNavigationFallback.js
@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {NavigationContext} from '@react-navigation/core';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+export default function (WrappedComponent) {
+    class WithNavigationFallback extends Component {
+        render() {
+            if (!this.context) {
+                return (
+                    <NavigationContext.Provider
+                        value={{
+                            isFocused: () => true,
+                            addListener: () => () => {},
+                            removeListener: () => () => {},
+                        }}
+                    >
+                        <WrappedComponent
+                            // eslint-disable-next-line react/jsx-props-no-spreading
+                            {...this.props}
+                            ref={this.props.forwardedRef}
+                        />
+                    </NavigationContext.Provider>
+                );
+            }
+
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            return <WrappedComponent {...this.props} ref={this.props.forwardedRef} />;
+        }
+    }
+    WithNavigationFallback.contextType = NavigationContext;
+    WithNavigationFallback.displayName = `WithNavigationFocusWithFallback(${getComponentDisplayName(WrappedComponent)})`;
+    WithNavigationFallback.propTypes = {
+        forwardedRef: PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+        ]),
+    };
+    WithNavigationFallback.defaultProps = {
+        forwardedRef: undefined,
+    };
+    return React.forwardRef((props, ref) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <WithNavigationFallback {...props} forwardedRef={ref} />
+    ));
+}
diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js
index 582c056b87b9..619b50f9b282 100644
--- a/src/pages/RequestCallPage.js
+++ b/src/pages/RequestCallPage.js
@@ -314,6 +314,7 @@ class RequestCallPage extends Component {
                         )}
                         <Button
                             success
+                            pressOnEnter
                             onPress={this.onSubmit}
                             style={[styles.w100]}
                             text={this.props.translate('requestCallPage.callMe')}
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index c951ba89c0bf..9b02db7951a9 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useState} from 'react';
 import Button from '../components/Button';
 
 /**
@@ -18,6 +18,23 @@ const Template = args => <Button {...args} />;
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Default = Template.bind({});
 const Loading = Template.bind({});
+const PressOnEnter = (props) => {
+    const [text, setText] = useState('');
+    const onPress = useCallback(() => {
+        setText('Button Pressed!');
+        setTimeout(() => setText(''), 500);
+    });
+    return (
+        <Button
+        // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        // eslint-disable-next-line react/prop-types
+            text={text || props.text}
+            onPress={onPress}
+        />
+    );
+};
+
 Default.args = {
     text: 'Save & Continue',
     success: true,
@@ -28,8 +45,15 @@ Loading.args = {
     success: true,
 };
 
+PressOnEnter.args = {
+    text: 'Press Enter',
+    pressOnEnter: true,
+    success: true,
+};
+
 export default story;
 export {
     Default,
     Loading,
+    PressOnEnter,
 };