From 1d43c0202db9016d73ff1086ac3a24ac37abadec Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:01:11 +0530
Subject: [PATCH 1/8] Allow bubbling Enter key press event on Button

---
 src/components/Button/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index 4ca933a45d6f..dc12a4ded5c2 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -18,6 +18,9 @@ import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 import refPropTypes from '../refPropTypes';
 
 const propTypes = {
+    /** Should the press event bubble across multiple instances when Enter key triggers it. */
+    allowBubble: PropTypes.bool,
+
     /** The text for the button label */
     text: PropTypes.string,
 
@@ -123,6 +126,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    allowBubble: false,
     text: '',
     shouldShowRightIcon: false,
     icon: null,
@@ -183,7 +187,7 @@ class Button extends Component {
             shortcutConfig.descriptionKey,
             shortcutConfig.modifiers,
             true,
-            false,
+            this.props.allowBubble,
             this.props.enterKeyEventListenerPriority,
             false,
         );

From b93018d7d0a0362d146a7eb4097777551f2531df Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:24:48 +0530
Subject: [PATCH 2/8] Add story for bubbling effect

---
 src/stories/Button.stories.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index 52212e673f0f..2c2ecb957eb2 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -1,5 +1,8 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, {useCallback, useState} from 'react';
+import {View} from 'react-native';
 import Button from '../components/Button';
+import Text from '../components/Text';
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -28,7 +31,6 @@ function PressOnEnter(props) {
     }, []);
     return (
         <Button
-            // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             // eslint-disable-next-line react/prop-types
             text={text || props.text}
@@ -37,6 +39,18 @@ function PressOnEnter(props) {
     );
 }
 
+function PressOnEnterWithBubbling(props) {
+    return (
+        <>
+            <Text>Both buttons will trigger on press of Enter as the Enter event will bubble across all instances of button.</Text>
+            <View style={{flexDirection: 'row', padding:10}}>
+            <PressOnEnter {...props} text="Button A"/>
+            <PressOnEnter {...props} text="Button B" />
+            </View>
+        </>
+    );
+}
+
 Default.args = {
     text: 'Save & Continue',
     success: true,
@@ -53,5 +67,12 @@ PressOnEnter.args = {
     success: true,
 };
 
+PressOnEnterWithBubbling.args = {
+    pressOnEnter: true,
+    success: true,
+    medium: true,
+    allowBubble: true,
+};
+
 export default story;
-export {Default, Loading, PressOnEnter};
+export {Default, Loading, PressOnEnter, PressOnEnterWithBubbling};

From 42c2dfb1589a51df26ec1e1f72bd2057a86b5813 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 28 Sep 2023 13:29:39 +0530
Subject: [PATCH 3/8] Enable Enter key submission on page under tab selector

---
 src/components/DistanceRequest.js             | 2 ++
 src/pages/iou/steps/MoneyRequestAmountForm.js | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
index aa7878337f21..62aa1eede16e 100644
--- a/src/components/DistanceRequest.js
+++ b/src/components/DistanceRequest.js
@@ -288,6 +288,8 @@ function DistanceRequest({transactionID, report, transaction, mapboxAccessToken,
             </View>
             <Button
                 success
+                allowBubble
+                pressOnEnter
                 style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
                 onPress={() => onSubmit(waypoints)}
                 isDisabled={_.size(validatedWaypoints) < 2 || (!isOffline && (hasRouteError || isLoadingRoute || isLoading))}
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.js b/src/pages/iou/steps/MoneyRequestAmountForm.js
index c4fc29957179..5d3a94c66314 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.js
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.js
@@ -266,10 +266,11 @@ function MoneyRequestAmountForm({amount, currency, isEditing, forwardedRef, onCu
                 ) : null}
                 <Button
                     success
+                    allowBubble
+                    pressOnEnter
                     medium={isExtraSmallScreenHeight}
                     style={[styles.w100, styles.mt5]}
                     onPress={submitAndNavigateToNextPage}
-                    pressOnEnter
                     text={buttonText}
                 />
             </View>

From 1b9e5a95cc0de689e732977c004bf7f13078429b Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 28 Sep 2023 14:02:05 +0530
Subject: [PATCH 4/8] Prettier changes

---
 src/stories/Button.stories.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.js
index 2c2ecb957eb2..9fec08800f0a 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.js
@@ -43,9 +43,15 @@ function PressOnEnterWithBubbling(props) {
     return (
         <>
             <Text>Both buttons will trigger on press of Enter as the Enter event will bubble across all instances of button.</Text>
-            <View style={{flexDirection: 'row', padding:10}}>
-            <PressOnEnter {...props} text="Button A"/>
-            <PressOnEnter {...props} text="Button B" />
+            <View style={{flexDirection: 'row', padding: 10}}>
+                <PressOnEnter
+                    {...props}
+                    text="Button A"
+                />
+                <PressOnEnter
+                    {...props}
+                    text="Button B"
+                />
             </View>
         </>
     );

From 4c1af37eb3d1fad7ab27f54f839ce2846bd0a755 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:53:28 +0530
Subject: [PATCH 5/8] PressonEnter for ButtonWithDropdownMenu

---
 src/components/ButtonWithDropdownMenu.js      | 6 ++++++
 src/stories/ButtonWithDropdownMenu.stories.js | 6 ++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 54d6c0deac5a..8642f72fa03a 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -19,6 +19,9 @@ const propTypes = {
     /** Callback to execute when the main button is pressed */
     onPress: PropTypes.func.isRequired,
 
+    /** Call the onPress function when Enter key is pressed */
+    pressOnEnter: PropTypes.bool,
+
     /** Whether we should show a loading state for the main button */
     isLoading: PropTypes.bool,
 
@@ -57,6 +60,7 @@ const propTypes = {
 const defaultProps = {
     isLoading: false,
     isDisabled: false,
+    pressOnEnter: false,
     menuHeaderText: '',
     style: [],
     buttonSize: CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
@@ -101,6 +105,7 @@ function ButtonWithDropdownMenu(props) {
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, ...props.style]}>
                     <Button
                         success
+                        pressOnEnter={props.pressOnEnter}
                         ref={props.buttonRef}
                         onPress={(event) => props.onPress(event, selectedItem.value)}
                         text={selectedItem.text}
@@ -138,6 +143,7 @@ function ButtonWithDropdownMenu(props) {
             ) : (
                 <Button
                     success
+                    pressOnEnter={props.pressOnEnter}
                     isDisabled={props.isDisabled}
                     style={[styles.w100, ...props.style]}
                     isLoading={props.isLoading}
diff --git a/src/stories/ButtonWithDropdownMenu.stories.js b/src/stories/ButtonWithDropdownMenu.stories.js
index 7629a6ff0e17..0df8c6c50023 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.js
+++ b/src/stories/ButtonWithDropdownMenu.stories.js
@@ -21,9 +21,11 @@ function Template(args) {
 const Default = Template.bind({});
 Default.args = {
     buttonText: 'Pay using Expensify',
+    onPress: (e, item) => {alert(`Button ${item} is pressed.`)},
+    pressOnEnter: true,
     options: [
-        {value: 1, text: 'One'},
-        {value: 2, text: 'Two'},
+        {value: 'One', text: 'One'},
+        {value: 'Two', text: 'Two'},
     ],
 };
 

From 56be20ac1f33a79fa8e687b552032b28655ed8d8 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:54:02 +0530
Subject: [PATCH 6/8] Fix: comment

---
 src/components/ButtonWithDropdownMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 8642f72fa03a..a0a6e276bc28 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -19,7 +19,7 @@ const propTypes = {
     /** Callback to execute when the main button is pressed */
     onPress: PropTypes.func.isRequired,
 
-    /** Call the onPress function when Enter key is pressed */
+    /** Call the onPress function on main button when Enter key is pressed */
     pressOnEnter: PropTypes.bool,
 
     /** Whether we should show a loading state for the main button */

From c40cf89d1e8ec7b94ce4b0601d4e0b0dfbfad241 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:01:08 +0530
Subject: [PATCH 7/8] Allow Entry key submission on confirmation page.

---
 src/components/MoneyRequestConfirmationList.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 695d935d7183..5bbaaecc5a8c 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -416,6 +416,7 @@ function MoneyRequestConfirmationList(props) {
             />
         ) : (
             <ButtonWithDropdownMenu
+                pressOnEnter
                 isDisabled={shouldDisableButton}
                 onPress={(_event, value) => confirm(value)}
                 options={splitOrRequestOptions}

From 2d89659797f9de734d827f3793f5dbd9bf11d770 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Fri, 29 Sep 2023 16:15:16 +0530
Subject: [PATCH 8/8] Lint

---
 src/stories/ButtonWithDropdownMenu.stories.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/stories/ButtonWithDropdownMenu.stories.js b/src/stories/ButtonWithDropdownMenu.stories.js
index 0df8c6c50023..88fa73c20fa1 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.js
+++ b/src/stories/ButtonWithDropdownMenu.stories.js
@@ -21,7 +21,9 @@ function Template(args) {
 const Default = Template.bind({});
 Default.args = {
     buttonText: 'Pay using Expensify',
-    onPress: (e, item) => {alert(`Button ${item} is pressed.`)},
+    onPress: (e, item) => {
+        alert(`Button ${item} is pressed.`);
+    },
     pressOnEnter: true,
     options: [
         {value: 'One', text: 'One'},