Merge pull request #28374 from parasharrajat/parasharrajat/button-bubble

Allow bubbling Enter key press event on Button

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,
         );

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 on main button 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}

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))}

src/components/MoneyRequestConfirmationList.js

@@ -433,6 +433,7 @@ function MoneyRequestConfirmationList(props) {
             />
         ) : (
             <ButtonWithDropdownMenu
+                pressOnEnter
                 isDisabled={shouldDisableButton}
                 onPress={(_event, value) => confirm(value)}
                 options={splitOrRequestOptions}

src/pages/iou/steps/MoneyRequestAmountForm.js

@@ -284,10 +284,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>

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,24 @@ 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 +73,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};

src/stories/ButtonWithDropdownMenu.stories.js

@@ -21,9 +21,13 @@ 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'},
     ],
 };