Skip to content

Commit

Permalink
Merge pull request #46278 from Krishna2323/krishna2323/issue/41848_fix2
Browse files Browse the repository at this point in the history
fix: Split - Enter and CMD+Enter open user profile instead of splitting expense.
  • Loading branch information
mountiny authored Aug 8, 2024
2 parents b625213 + c7ba966 commit 53eee53
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 6 deletions.
24 changes: 18 additions & 6 deletions src/components/ButtonWithDropdownMenu/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import Button from '@components/Button';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import PopoverMenu from '@components/PopoverMenu';
import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import mergeRefs from '@libs/mergeRefs';
import * as Modal from '@userActions/Modal';
import CONST from '@src/CONST';
import type {AnchorPosition} from '@src/styles';
Expand Down Expand Up @@ -37,6 +39,7 @@ function ButtonWithDropdownMenu<IValueType>({
onOptionsMenuHide,
enterKeyEventListenerPriority = 0,
wrapperStyle,
useKeyboardShortcuts = false,
}: ButtonWithDropdownMenuProps<IValueType>) {
const theme = useTheme();
const styles = useThemeStyles();
Expand All @@ -46,6 +49,7 @@ function ButtonWithDropdownMenu<IValueType>({
const [popoverAnchorPosition, setPopoverAnchorPosition] = useState<AnchorPosition | null>(null);
const {windowWidth, windowHeight} = useWindowDimensions();
const dropdownAnchor = useRef<View | null>(null);
const dropdownButtonRef = isSplitButton ? buttonRef : mergeRefs(buttonRef, dropdownAnchor);
const selectedItem = options[selectedItemIndex] || options[0];
const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(buttonSize);
const isButtonSizeLarge = buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
Expand All @@ -70,19 +74,27 @@ function ButtonWithDropdownMenu<IValueType>({
});
}
}, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical]);

useKeyboardShortcut(
CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER,
(e) => {
onPress(e, selectedItem.value);
},
{
captureOnInputs: true,
shouldBubble: false,
isActive: useKeyboardShortcuts,
},
);

return (
<View style={wrapperStyle}>
{shouldAlwaysShowDropdownMenu || options.length > 1 ? (
<View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, style]}>
<Button
success={success}
pressOnEnter={pressOnEnter}
ref={(ref) => {
if (isSplitButton) {
return;
}
dropdownAnchor.current = ref;
}}
ref={dropdownButtonRef}
onPress={(event) => (!isSplitButton ? setIsMenuVisible(!isMenuVisible) : onPress(event, selectedItem.value))}
text={customText ?? selectedItem.text}
isDisabled={isDisabled || !!selectedItem?.disabled}
Expand Down
3 changes: 3 additions & 0 deletions src/components/ButtonWithDropdownMenu/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,9 @@ type ButtonWithDropdownMenuProps<TValueType> = {

/** Whether the button should use split style or not */
isSplitButton?: boolean;

/** Whether to use keyboard shortcuts for confirmation or not */
useKeyboardShortcuts?: boolean;
};

export type {
Expand Down
3 changes: 3 additions & 0 deletions src/components/MoneyRequestConfirmationList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -805,6 +805,7 @@ function MoneyRequestConfirmationList({
vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
}}
enterKeyEventListenerPriority={1}
useKeyboardShortcuts
/>
) : (
<ButtonWithDropdownMenu
Expand All @@ -815,6 +816,7 @@ function MoneyRequestConfirmationList({
options={splitOrRequestOptions}
buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
enterKeyEventListenerPriority={1}
useKeyboardShortcuts
/>
);

Expand Down Expand Up @@ -910,6 +912,7 @@ function MoneyRequestConfirmationList({
listFooterContent={listFooterContent}
containerStyle={[styles.flexBasisAuto]}
removeClippedSubviews={false}
disableKeyboardShortcuts
/>
</MouseProvider>
);
Expand Down
5 changes: 5 additions & 0 deletions src/components/SettlementButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,9 @@ type SettlementButtonProps = SettlementButtonOnyxProps & {

/** Callback to open confirmation modal if any of the transactions is on HOLD */
confirmApproval?: () => void;

/** Whether to use keyboard shortcuts for confirmation or not */
useKeyboardShortcuts?: boolean;
};

function SettlementButton({
Expand Down Expand Up @@ -148,6 +151,7 @@ function SettlementButton({
enterKeyEventListenerPriority = 0,
confirmApproval,
policy,
useKeyboardShortcuts = false,
onPaymentOptionsShow,
onPaymentOptionsHide,
}: SettlementButtonProps) {
Expand Down Expand Up @@ -322,6 +326,7 @@ function SettlementButton({
buttonSize={buttonSize}
anchorAlignment={paymentMethodDropdownAnchorAlignment}
enterKeyEventListenerPriority={enterKeyEventListenerPriority}
useKeyboardShortcuts={useKeyboardShortcuts}
/>
)}
</KYCWall>
Expand Down

0 comments on commit 53eee53

Please sign in to comment.