Merge pull request Expensify#65959 from mehrozone/65501_Update_Dropdow_Button

65501 update dropdown to show only button in case of single option

Author: thienlnam

src/CONST/index.ts

@@ -5137,6 +5137,7 @@ const CONST = {
     },
     SELECTION_LIST_WITH_MODAL_TEST_ID: 'selectionListWithModalMenuItem',
 
+    ICON_TEST_ID: 'Icon',
     IMAGE_TEST_ID: 'Image',
     IMAGE_SVG_TEST_ID: 'ImageSVG',
     VIDEO_PLAYER_TEST_ID: 'VideoPlayer',

src/components/ButtonWithDropdownMenu/index.tsx

@@ -109,6 +109,25 @@ function ButtonWithDropdownMenuInner<IValueType>(props: ButtonWithDropdownMenuPr
         }
     }, [windowWidth, windowHeight, isMenuVisible, anchorAlignment.vertical, popoverHorizontalOffsetType]);
 
+    const handleSingleOptionPress = useCallback(
+        (event: GestureResponderEvent | KeyboardEvent | undefined) => {
+            const option = options.at(0);
+            if (!option) {
+                return;
+            }
+
+            if (option.onSelected) {
+                option.onSelected();
+            } else {
+                onOptionSelected?.(option);
+                onPress(event, option.value);
+            }
+
+            onSubItemSelected?.(option, 0, event);
+        },
+        [options, onPress, onOptionSelected, onSubItemSelected],
+    );
+
     useKeyboardShortcut(
         CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER,
         (e) => {
@@ -121,10 +140,7 @@ function ButtonWithDropdownMenuInner<IValueType>(props: ButtonWithDropdownMenuPr
                     onPress(e, selectedItem.value);
                 }
             } else {
-                const option = options.at(0);
-                if (option?.value) {
-                    onPress(e, option.value);
-                }
+                handleSingleOptionPress(e);
             }
         },
         {
@@ -215,10 +231,7 @@ function ButtonWithDropdownMenuInner<IValueType>(props: ButtonWithDropdownMenuPr
                     disabledStyle={disabledStyle}
                     isLoading={isLoading}
                     text={selectedItem?.text}
-                    onPress={(event) => {
-                        const option = options.at(0);
-                        return option ? onPress(event, option.value) : undefined;
-                    }}
+                    onPress={handleSingleOptionPress}
                     large={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE}
                     medium={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
                     small={buttonSize === CONST.DROPDOWN_BUTTON_SIZE.SMALL}
@@ -229,6 +242,7 @@ function ButtonWithDropdownMenuInner<IValueType>(props: ButtonWithDropdownMenuPr
                     icon={shouldUseOptionIcon && !shouldShowButtonRightIcon ? options.at(0)?.icon : icon}
                     iconRight={shouldShowButtonRightIcon ? options.at(0)?.icon : undefined}
                     shouldShowRightIcon={shouldShowButtonRightIcon}
+                    testID={testID}
                 />
             )}
             {(shouldAlwaysShowDropdownMenu || options.length > 1) && !!popoverAnchorPosition && (

src/pages/workspace/companyCards/WorkspaceCompanyCardsListHeaderButtons.tsx

@@ -134,7 +134,7 @@ function WorkspaceCompanyCardsListHeaderButtons({policyID, selectedFeed, shouldS
                     <ButtonWithDropdownMenu
                         success={false}
                         onPress={() => {}}
-                        shouldAlwaysShowDropdownMenu
+                        shouldUseOptionIcon
                         customText={translate('common.more')}
                         options={secondaryActions}
                         isSplitButton={false}

src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx

@@ -337,7 +337,7 @@ function PolicyDistanceRatesPage({
                     <ButtonWithDropdownMenu
                         success={false}
                         onPress={() => {}}
-                        shouldAlwaysShowDropdownMenu
+                        shouldUseOptionIcon
                         customText={translate('common.more')}
                         options={secondaryActions}
                         isSplitButton={false}

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -335,7 +335,7 @@ function WorkspaceTaxesPage({
             <ButtonWithDropdownMenu
                 success={false}
                 onPress={() => {}}
-                shouldAlwaysShowDropdownMenu
+                shouldUseOptionIcon
                 customText={translate('common.more')}
                 options={secondaryActions}
                 isSplitButton={false}

tests/ui/components/ButtonWithDropdownMenuTest.tsx

@@ -0,0 +1,68 @@
+import {fireEvent, render, screen} from '@testing-library/react-native';
+import React from 'react';
+import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import * as Expensicons from '@components/Icon/Expensicons';
+import CONST from '@src/CONST';
+
+describe('ButtonWithDropdownMenu (single option)', () => {
+    const mockOnSelected = jest.fn();
+    const mockOnOptionSelected = jest.fn();
+    const mockOnSubItemSelected = jest.fn();
+    const mockOnPress = jest.fn();
+    const option = {
+        value: 'test',
+        text: 'Test Option',
+        icon: Expensicons.Checkbox,
+        onSelected: mockOnSelected,
+    };
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders a button (not a dropdown) when only one option is present', () => {
+        render(
+            <ButtonWithDropdownMenu
+                options={[option]}
+                onPress={mockOnPress}
+                onOptionSelected={mockOnOptionSelected}
+                onSubItemSelected={mockOnSubItemSelected}
+                shouldUseOptionIcon
+            />,
+        );
+        expect(screen.getByText('Test Option')).toBeTruthy();
+    });
+
+    it('calls all relevant callbacks when the button is pressed', () => {
+        render(
+            <ButtonWithDropdownMenu
+                options={[option]}
+                onPress={mockOnPress}
+                onOptionSelected={mockOnOptionSelected}
+                onSubItemSelected={mockOnSubItemSelected}
+                shouldUseOptionIcon
+            />,
+        );
+        fireEvent.press(screen.getByText('Test Option'));
+        expect(mockOnSelected).toHaveBeenCalled();
+        expect(mockOnOptionSelected).not.toHaveBeenCalled(); // onSelected takes precedence
+        expect(mockOnSubItemSelected).toHaveBeenCalledWith(expect.objectContaining(option), 0, undefined);
+        expect(mockOnPress).not.toHaveBeenCalled(); // onPress should not be called when onSelected exists to prevent double execution
+    });
+
+    it('renders the icon from the option along with the text', () => {
+        render(
+            <ButtonWithDropdownMenu
+                options={[option]}
+                onPress={mockOnPress}
+                onOptionSelected={mockOnOptionSelected}
+                onSubItemSelected={mockOnSubItemSelected}
+                shouldUseOptionIcon
+                testID={CONST.ICON_TEST_ID}
+            />,
+        );
+        const iconNodes = screen.getAllByTestId(CONST.ICON_TEST_ID);
+        expect(iconNodes.length).toBeGreaterThan(0);
+        expect(screen.getByText('Test Option')).toBeTruthy();
+    });
+});