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

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

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>

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'},
  ],
 };